结构-行为-样式

来源：互联网发布：哪个公司网络信号最好编辑：程序博客网时间：2024/06/11 04:26

新的项目中有一个需求是要求客户标签可以自定义，于是就想到了客户体验，让客户自己拖拽标签进行组合查询。但是理想很丰满，现实很骨感。一开始就遇到了问题，各个插件之间的结合问题，折腾一翻之后终于实现了这个功能，这里记录一下。

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

0 0