Structure-behavior-style-Angularjs ztree combined with jQueryUI for drag and drop

One of the requirements of the new project is that the customer's label can be customized, so the customer experience is thought of, allowing the customer to drag and drop tags for the combined query. But the ideal is plump, the reality is very bony. At the beginning of the problem, the integration between the various plug-ins problem, toss a turn after finally realized this function, here record.

First, plug-ins are introduced in a ANGULARJS+AMD+REQUIREJS environment:

Require.config ({baseUrl:"", Urlargs:' ver= ' + (+NewDate ()), 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 ']});

Second, initialize the jQueryUI object in the controller:

$scope. Initializecontroller = function () {
$ ("#dropzone"). droppable ({scope:"Tasks",//field, drag the field to drag and drop the same field can be put in                        //Accept : ". Dragg",//the class to be accepted in the drag objectTolerance: "Fit",//When the element is dragged and dropped into the droppable area, fit is all entered intoDropfunction(Event,ui) {//put, the callback function of this action                            varUID = ui.draggable[0].id; varDropzone = $ ("#dropzone"). Offset ();//get the absolute position of the relative drop area                            varOleft = Ui.position.left-dropzone.left;//get the absolute position of the relative drop area                            varOtop = Ui.position.top-dropzone.top;//get the absolute position of the relative drop area$( 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></div> ')); }                                });
}

Finally, in the ztree provided by the custom Dom method (adddiydom), the jQueryUI of the node is dragged and bound:

$scope. mysetting ={view: {selectedmulti:false, Showicon:true, ShowLine:false, Dblclickexpand:false, Adddiydom:function(Treeid, TreeNode) {varSpacewidth = 20; varSwitchobj = $ ("#" + Treenode.tid + "_switch"), Icoobj= $ ("#" + Treenode.tid + "_ico");                            Switchobj.remove ();                           Icoobj.before (Switchobj); if(Treenode.level > 0) {                                varSpacestr = "<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].clientwid                                    Th, 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; }                    }            };

Note: in fact, using the Ztree provided by the custom Dom method to add a custom layer, and then bind their own jQueryUI drag method.

Structure-behavior-style-Angularjs ztree combined with jQueryUI for drag and drop