结构-行为-样式 - Angularjs 环境下Ztree结合JqueryUI实现拖拽

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

首先,在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

结构-行为-样式 - Angularjs 环境下Ztree结合JqueryUI实现拖拽的相关文章

Android NDK项目结构(在Eclipse环境下观察)

带有原生组件的Android项目包含一组附加的目录和文件. jni: 该目录包含原生组件的源代码以及描述原生组件构建方法的Android.mk构建文件. Android NDK构建系统将该目录作为NDK项目目录并希望在项目根目录中找到它. Libs: 在Android NDK构建系统的构建过程中创建该目录. 它包含指定的目标机体系结构的独立子目录,例如ARM的armeabi.在打包过程中该目录被包含在APK文件中. Obj: 这是一个中间目录,编译源代码后所产生的目标文件都保存在该目录下.开发人

从下拉菜单拖拽一个元素 出来,插入到页面中的app 列表中

1,实现功能:从下拉菜单拖拽一个元素 出来,插入到页面中的app 列表中 并实现app向后移动一个元素的位置: 2.实现思路: 01.遍历下拉菜单,添加拖拽方法,实现位置移动功能: 02.遍历app列表,将app位置存为数组,进行循环: 03.拖拽元素与当前app做碰撞检测: 04.如果鼠标在app内部,则将拖拽元素添加到当前app之后,位置设置为当前 i 的值: 参考代码如下: <!doctype html> <html lang="en"> <head

Angularjs学习---angularjs环境搭建,ubuntu 12.04下安装nodejs、npm和karma

1.下载angularjs 进入其官网下载:https://angularjs.org/?,建议下载最新版的:https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.7/angular.js 所有版本:https://code.angularjs.org/ 2.示例1 HelloWorld ! 新建一个helloworld.html <!doctype html> <html ng-app> <head> &

Python开发程序:生成环境下统计网站访问日志信息

日志实时分析系统 生产环境下有需求:要每搁五分钟统计下这段时间内的网站访问量.UV.独立IP等信息,用直观的数据表格表现出来 环境描述: 网站为Nginx服务,系统每日凌晨会对日志进行分割,拷贝到其他位置,当前日志清空 NGINX日志配置信息: http { log_format main '$remote_addr - [$time_local] "$request" ' ' - $status "User_Cookie:$guid" '; } server {

Mac环境下svn的使用

在Windows环境中,我们一般使用TortoiseSVN来搭建svn环境.在Mac环境下,由于Mac自带了svn的服务器端和客户端功能,所以我们可以在不装任何第三方软件的前提下使用svn功能,不过还需做一下简单的配置. 我们首先来看下,如何在Mac环境下搭建svn服务器端环境. 一.创建代码仓库,用来存储客户端所上传的代码 我先在/User/apple目录下新建一个svn目录,以后可以在svn目录下创建多个仓库目录 打开终端,创建一个mycode仓库,输入指令:svnadmin create

ant+jmeter 在Linux环境下接口自动化测试环境搭建(2)

上一篇讲过在Windows下搭建的方法,今天这里写一下在Linux环境下搭建的方法. 实验准备:Linux服务器一台. 服务器上安装好jdk,配置好环境变量. 服务器上配置好ant. 工具准备: Jdk下载地址: http://www.oracle.com/technetwork/java/javase/downloads/index.html Jmeter下载地址 http://jmeter.apache.org/ Ant下载地址 http://ant.apache.org/ 环境准备: 所以

Linux环境下使用JFS文件系统

Linux环境下使用JFS文件系统 JFS是IBM公司为linux系统开发的一个日志文件系统.从IBM的实力及它对Linux的态度来看,JFS应该是未来日志文件系统中最具实力的一个文件系统. JFS提供了基于日志的字节级文件系统,该文件系统是为面向事务的高性能系统而开发的.JFS 能够在几秒或几 分钟内就把文件系统恢复到一致状态.JFS能够保证数据在任何意外宕机的情况下,不会造成磁盘数据的丢失与损坏. 一.JFS文件系统特点 1.存储空间更大 JFS 支持的最小文件系统是 16M 字节.最大文件

第一部分:使用iReport制作报表的详细过程(Windows环境下)

提示:在有些板块,文中的图片看不到,建议到我的blog浏览文章:http://blog.csdn.net/jemlee2002/文章将会涉及3个方面的内容: 第二部分:使用Jasperreport作为报表控件开发胖客户端报表应用 第三部分:使用Jasperreport作为报表控件开发Web报表应用 1.前言 在网络上可以搜索到很多使用iReport和Jasperreport配合实现各种报表任务的文章,但是我觉得很少有一篇(几乎没有)做一个比较详细的介绍如何使用iReport制作报表的全过程,我所

Gvim各种插件配置(windows环境下)

1.Vundle插件:https://github.com/gmarik/Vundle.vim 用于管理Vim插件,安装此插件需要系统中已安装git,参考链接:Git for Windows安装和基本设置 在Vim/vimfiles路径下新建文件夹bundle,然后在此文件夹下克隆github上的vundel项目: 完成后会在bundle文件夹下看到Vundle.vim文件夹下的内容,开始配置vundle: 在.vimrc文件中添加如下代码: 1 filetype off 2 3 "Vundle