<!DOCTYPE html>

<HTML>

<HEAD>

    <TITLE> ZTREE DEMO - beforeDrag / onDrag / beforeDrop / onDrop</TITLE>

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <link rel="stylesheet" href="../../../css/demo.css" type="text/css">

    <link rel="stylesheet" href="../../../css/zTreeStyle/zTreeStyle.css" type="text/css">

    <script type="text/javascript" src="../../../js/jquery-1.4.4.min.js"></script>

    <script type="text/javascript" src="../../../js/jquery.ztree.core.js"></script>

    <script type="text/javascript" src="../../../js/jquery.ztree.excheck.js"></script>

    <script type="text/javascript" src="../../../js/jquery.ztree.exedit.js"></script>

    <SCRIPT type="text/javascript">

        var setting = {

            edit: {

                drag: {

                    autoExpandTrigger: true,

                    prev: dropPrev,

                    inner: dropInner,

                    next: dropNext

                },

                enable: true,

                showRemoveBtn: false,

                showRenameBtn: false

            },

            data: {

                simpleData: {

                    enable: true

                }

            },

            callback: {

                beforeDrag: beforeDrag,

                beforeDrop: beforeDrop,

                beforeDragOpen: beforeDragOpen,

                onDrag: onDrag,

                onDrop: onDrop,

                onExpand: onExpand

            }

        };

        var zNodes =[

            { id:1, pId:0, name:"节点1", open:false},

            { id:11, pId:1, name:"节点1-1"},

            { id:12, pId:1, name:"节点1-2"},

            { id:121, pId:12, name:"节点1-2-1"},

            { id:122, pId:12, name:"节点1-2-2"},

            { id:123, pId:12, name:"节点1-2-3"},

            { id:3, pId:0, name:"节点3", open:false},

            { id:31, pId:3, name:"节点3-1"},

            { id:32, pId:3, name:"节点3-2"},

            { id:33, pId:3, name:"节点3-3"}

        ];

        function dropPrev(treeId, nodes, targetNode) {

            var pNode = targetNode.getParentNode();

            if (pNode && pNode.dropInner === false) {

                return false;

            } else {

                for (var i=0,l=curDragNodes.length; i<l; i++) {

                    var curPNode = curDragNodes[i].getParentNode();

                    if (curPNode && curPNode !== targetNode.getParentNode() && curPNode.childOuter === false) {

                        return false;

                    }

                }

            }

            return true;

        }

        function dropInner(treeId, nodes, targetNode) {

            if (targetNode && targetNode.dropInner === false) {

                return false;

            } else {

                for (var i=0,l=curDragNodes.length; i<l; i++) {

                    if (!targetNode && curDragNodes[i].dropRoot === false) {

                        return false;

                    } else if (curDragNodes[i].parentTId && curDragNodes[i].getParentNode() !== targetNode && curDragNodes[i].getParentNode().childOuter === false) {

                        return false;

                    }

                }

            }

            return true;

        }

        function dropNext(treeId, nodes, targetNode) {

            var pNode = targetNode.getParentNode();

            if (pNode && pNode.dropInner === false) {

                return false;

            } else {

                for (var i=0,l=curDragNodes.length; i<l; i++) {

                    var curPNode = curDragNodes[i].getParentNode();

                    if (curPNode && curPNode !== targetNode.getParentNode() && curPNode.childOuter === false) {

                        return false;

                    }

                }

            }

            return true;

        }

        var log, className = "dark", curDragNodes, autoExpandNode;

        function beforeDrag(treeId, treeNodes) {

            className = (className === "dark" ? "":"dark");

            for (var i=0,l=treeNodes.length; i<l; i++) {

                if (treeNodes[i].drag === false) {

                    curDragNodes = null;

                    return false;

                } else if (treeNodes[i].parentTId && treeNodes[i].getParentNode().childDrag === false) {

                    curDragNodes = null;

                    return false;

                }

            }

            curDragNodes = treeNodes;

            return true;

        }

        function beforeDragOpen(treeId, treeNode) {

            autoExpandNode = treeNode;

            return true;

        }

        function beforeDrop(treeId, treeNodes, targetNode, moveType, isCopy) {

            className = (className === "dark" ? "":"dark");

            return true;

        }

        function onDrag(event, treeId, treeNodes) {

            console.log("拖拽节点")

            className = (className === "dark" ? "":"dark");

        }

        function onDrop(event, treeId, treeNodes, targetNode, moveType, isCopy) {

            className = (className === "dark" ? "":"dark");

        }

        function onExpand(event, treeId, treeNode) {

            if (treeNode === autoExpandNode) {

                className = (className === "dark" ? "":"dark");

            }

        }

        function getTime() {

            var now= new Date(),

            h=now.getHours(),

            m=now.getMinutes(),

            s=now.getSeconds(),

            ms=now.getMilliseconds();

            return (h+":"+m+":"+s+ " " +ms);

        }

        function setTrigger() {

            var zTree = $.fn.zTree.getZTreeObj("treeDemo");

            zTree.setting.edit.drag.autoExpandTrigger = $("#callbackTrigger").attr("checked");

        }

        $(document).ready(function(){

            $.fn.zTree.init($("#treeDemo"), setting, zNodes);

            $("#callbackTrigger").bind("change", {}, setTrigger);

        });

    </SCRIPT>

</HEAD>

<BODY>

<div class="content_wrap">

    <div class="zTreeDemoBackground left">

        <ul id="treeDemo" class="ztree"></ul>

    </div>

</div>

</BODY>

</HTML>

拖拽几点实现排序

ztree-拖拽（排序树）的更多相关文章

  1. zTree的拖拽排序

    ztree本身是可以支持拖拽的,但是却没有找到明确的支持拖拽的排序,也就是说,在拖拽过程中,需要自定义维护拖拽后的顺序并保存至后台. 在这样一个比较常规的需求情况下,网上也有朋友给出了一些解决方案,比 ...

  2. ztree使用系列四（ztree实现同级拖拽排序并将排序结果保存数据库）

    ztree这个系列的最后一篇,也是ztree功能强大的体现之中的一个--排序功能. ztree能够实现全部节点之间任意的拖拽排序功能.我这里依据须要实现了仅仅同意同级之间任意拖拽排序,事实上原理都一样 ...

  3. easyui树节点拖拽排序的存储过程

    easyui树的拖拽排序功能 easyui树中有拖拽功能 树结构如下: 一个行政区域对应一个单位,一个单位对应多个部门,每个部门下有相关人员,功能要求: (1)行政区域没有子节点,点击text加载部门 ...

  4. jQuery可拖拽排序列表jquery-sortable-lists

    jquery-sortable-lists可以通过鼠标进行拖动排列树型菜单,可以定义某个列表元素是否拖动,拖动后回调,点击可以折叠树型结点,可以用来在后台模仿wordpress后台拖动菜单,实现多级菜 ...

  5. dragsort html拖拽排序

    一.Jquery List DragSort 对于有些页面,如首页的定制,需要进行动态的拖拽排序.由于自己实现比较困难,我们一般会使用一些js插件来实现.dragsort 就是帮助我们完成这一需求.通 ...

  6. 使用knockout-sortable实现对自定义菜单的拖拽排序

    在开始之前,照例,我们先看效果和功能实现. 关于自定义菜单的实现,这里就不多说了,需要了解的请访问:http://www.cnblogs.com/codelove/p/4838766.html 这里需 ...

  7. RecyclerView拖拽排序和滑动删除实现

    效果图 如何实现 那么是如何实现的呢?主要就要使用到ItemTouchHelper ,ItemTouchHelper 一个帮助开发人员处理拖拽和滑动删除的实现类,它能够让你非常容易实现侧滑删除.拖拽的 ...

  8. jquery sortTable拖拽排序

    所有的事件回调函数都有两个参数:event和ui,浏览器自有event对象,和经过封装的ui对象   ui.helper - 表示sortable元素的JQuery对象,通常是当前元素的克隆对象   ...

  9. ListView列表拖拽排序

    ListView列表拖拽排序能够參考Android源代码下的Music播放列表,他是能够拖拽的,源代码在[packages/apps/Music下的TouchInterceptor.java下]. 首 ...

  10. RecyclerViewItemTouchHelperDemo【使用ItemTouchHelper进行拖拽排序功能】

    版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 记录使用ItemTouchHelper对Recyclerview进行拖拽排序功能的实现. 效果图 代码分析 ItemTouchHel ...

随机推荐

  1. OSS上传文件时设置请求头

    直接上传: // 如果需要上传时设置存储类型与访问权限,请参考以下示例代码. // ObjectMetadata metadata = new ObjectMetadata(); // metadat ...

  2. java基础之 修饰符

    一.访问修饰符 Java中,可以使用访问控制符来保护对类.变量.方法和构造方法的访问.Java 支持 4 种不同的访问权限. 1.default (即缺省,什么也不写): 在同一包内可见,不使用任何修 ...

  3. python面试的100题（8）

    企业面试题 15.python新式类和经典类的区别? (在Python 2及以前的版本中,由任意内置类型派生出的类(只要一个内置类型位于类树的某个位置),都属于“新式类”,都会获得所有“新式类”的特性 ...

  4. IMM设置静态ip,安装系统

    IMM设置静态ip,安装系统 设置ip: System Setting->Integrated Management Module->Network configuration 修改后选择 ...

  5. Flink流处理（三）- 数据流操作

    3. 数据流操作 流处理引擎一般会提供一组内置的操作,用于对流做消费.转换,以及输出.接下来我们介绍一下最常见的流操作. 操作分为无状态的(stateless)与有状态的(stateful).无状态的 ...

  6. 8.1.1 IO

    IO对象无拷贝或赋值.进行IO操作的函数通常以引用的方式传递和返回流,且该引用不能是const的 确定一个流对象是否处于良好状态的最简单的方法是将它作为一个条件来使用 while (cin >& ...

  7. Is It Good To Use LED Wall Light In Household Space?

    Wall lamps are mostly used for local lighting, can play a very decorative effect, improve the visual ...

  8. （转）Java中的String与常量池

    Java中的String与常量池 转自:http://developer.51cto.com/art/201106/266454.htm string是java中的字符串.String类是不可变的,对 ...

  9. 我的reshape观

    reshape(1,2)把结果分成1块,每一块2个元素 reshape(2,1)把结果分成2块,每一块1个元素 reshape(-1,1)把结果分成任意块,每一块1个元素 reshape(1,-1)把 ...

  10. python正则元字符的含义

    练习的时候使用linux+ipython,ipython安装 python的元字符 # 元字符 :#  .   ^   $   *   +   ?   {}  []   \   |   () 注:\w ...