结构-行为-样式 - Angularjs 环境下Ztree结合JqueryUI实现拖拽

Posted 2020-08-27

新的项目中有一个需求是要求客户标签可以自定义，于是就想到了客户体验，让客户自己拖拽标签进行组合查询。但是理想很丰满，现实很骨感。一开始就遇到了问题，各个插件之间的结合问题，折腾一翻之后终于实现了这个功能，这里记录一下。

 

首先，在Angularjs+AMD+RequireJs的环境下引入插件：

require.config({
    baseUrl: "",
    urlArgs: ‘ver=‘ + (+new Date()),
    waitSeconds: 0,
    paths: {
        ‘jqueryUI‘:‘scripts/jquery-ui.min‘,
    ‘ztree‘:‘vender/ztree/jquery.ztree.core-3.5‘,
        ‘ztree-exedit‘: ‘vender/ztree/jquery.ztree.exedit-3.5‘,    
        ‘ztree-excheck‘: ‘vender/ztree/jquery.ztree.excheck-3.5‘,
},
    shim: {
        ‘angular-ui-router‘: [‘angular‘],       
        ‘angular‘: [‘jquery‘],
        ‘ngRoute‘:[‘angular‘],       
        ‘angularAMD‘: [‘angular‘],
        ‘ocLazyLoad‘: [‘angular‘],      
        ‘jqueryUI‘:[‘jquery‘]       
    },
    deps: [‘app‘]
});

其次，在Controller中把JqueryUI对象初始化：

$scope.initializeController = function () { 
　　　　$("#dropzone").droppable({
                        scope:"tasks",//域，拖动的域与拖放的域要相同才可以放进去
                        //accept: ".dragg",//接受的Drag对象中要有的类
                        tolerance: "fit",//元素在什么情况下才算是拖放进入了Droppable区域，FIT就是全部进入才算进入
                        drop:function(event,ui){//放，这个动作的回调函数
                            var uid = ui.draggable[0].id;
                            var dropzone = $("#dropzone").offset();//得到相对drop区域的绝对位置
                            var oleft = ui.position.left - dropzone.left;//得到相对drop区域的绝对位置
                            var otop  = ui.position.top  - dropzone.top;//得到相对drop区域的绝对位置
                        $(this).append($("<div class=‘cloneele‘ style=‘left:"+oleft+"px;top:"+otop+"px;‘><a href=‘javascript:;‘ class=‘close ‘ id=‘"+uid+"close‘ ><i class=‘glyphicon glyphicon-remove‘></i></a><img src=‘images/component/"+uid+".png‘/></div>"));
                    }
                
                });
}

最后在zTree提供的自定义Dom的方法(addDiyDom)中进行节点的JqueryUi的拖拽绑定：

$scope.mySetting = {
                    view: {
                        selectedMulti: false,
                        showIcon:true,
                        showLine:false,
                        dblClickExpand: false,
                        addDiyDom: function (treeId, treeNode) {
                            var spaceWidth = 20;
                            var switchObj = $("#" + treeNode.tId + "_switch"),
                            icoObj = $("#" + treeNode.tId + "_ico");
                            switchObj.remove();
                            icoObj.before(switchObj);
                           if (treeNode.level > 0) {
                                var spaceStr = "<span style=‘display: inline-block;width:" + (spaceWidth * treeNode.level)+"px‘></span>";
                                switchObj.before(spaceStr);
                            }
                             $("#"+treeNode.tId+"_a").draggable({
                                    helper:function(){
                                        return angular.element("<span class=‘diy-drag-span dragg‘ >"+treeNode.name+"</span>");
                                    },
                                    opacity: 0.5,
                                    snap: true,
                                    cursor: "pointer",
                                    grid: [ 20, 20 ],
                                    appendTo: "body",
                                    scope:"tasks",
                                    zIndex:1002
                                 });
                                 /*$("#dropzone .cloneele").resizable( "destroy" );*/
                                  /*  $dragDom.resizable({
                                         aspectRatio: true,
                                         maxHeight:$("#dropzone")[0].clientHeight,
                                         maxWidth:$("#dropzone")[0].clientWidth,
                                         handles: "n,e, s,w, se"
                                    });
                                    */
                        }

                    },
                    edit: {
                        enable: true,
                        showRemoveBtn: function(treeId, treeNode){
                            return false;
                        },
                        showRenameBtn: function(treeId, treeNode){
                            return false;
                        }
                    },
                    data: {
                        simpleData: {
                            enable: true
                        }
                    },
                    callback: {
                        onClick: function (event, treeId, treeNode) {
                           
                            $scope.currentSelect = treeNode;
                        },
                        beforeDrag: function (treeId, treeNodes) {
                            
                            return false;
                        },
                        beforeDrop: function (treeId, treeNodes, targetNode, moveType) {
                           
                            return false;
                        }

                    }

            };

注：其实就是利用了zTree提供的自定义Dom的方法添加一个自定义的层，然后 在这个层上绑定自己的JqueryUI拖拽方法。