新的项目中有一个需求是要求客户标签可以自定义,于是就想到了客户体验,让客户自己拖拽标签进行组合查询。但是理想很丰满,现实很骨感。一开始就遇到了问题,各个插件之间的结合问题,折腾一翻之后终于实现了这个功能,这里记录一下。
首先,在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拖拽方法。
时间: 2024-09-30 16:20:13