結構-行爲-樣式 - Angularjs 實現樹形結構拖拽（Ztree、JqueryUI）

新的項目中有一個需求是要求客戶標籤可以自定義，於是就想到了客戶體驗，讓客戶自己拖拽標籤進行組合查詢。但是理想很豐滿，現實很骨感。一開始就遇到了問題，各個插件之間的結合問題，折騰一翻之後終於實現了這個功能，這裏記錄一下。

 

首先，在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拖拽方法。