标签：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实现拖拽
标签：drag switch javascrip sel scripts png pts 3.5 play
原文地址：http://www.cnblogs.com/BigUncleTang/p/6286272.html
