結構-行為-樣式 - Angularjs 環境下Ztree結合JqueryUI實現拖拽

標籤：drag   switch   javascrip   sel   scripts   png   pts   3.5   play   

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

 

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

 

結構-行為-樣式 - Angularjs 環境下Ztree結合JqueryUI實現拖拽