<!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. linux复制，网络报错

    我拷贝了过来的Linux虚拟机无法上网,我用ifconfig命令查询了一下发现只有eth1和lo设备,没有eth0.于是我在Google上搜索了一下, <VMWare克隆或复制Linux虚拟机后 ...

  2. Linux就该这么学(第一天)

    原文地址:https://www.linuxprobe.com/chapter-01.html 最近想着要发布原来做的一个javaweb小项目 域名 云服务器都买好了,然后很尴尬,不会在云服务器上搭建 ...

  3. 在Linux系统下安装jdk并配置环境变量

    本文主要介绍的是如何是Linux环境下安装JDK的,因为Linux环境下,很多时候也离不开Java的,下面笔者就和大家一起分享如何jdk1.8的过程吧. 1.安装环境 操作系统:CentOS 07 6 ...

  4. js替换所有匹配字符

    js没有replaceAll,所以用正则表达式查找所有匹配项("g"), .replace(new RegExp("\\.", "g"), ...

  5. span强制不换行

    <nobr>不换行内容</nobr> 无论多少文字均不希望换行显示,超出宽度的内容会显示不出来. <div> <nobr> <span class ...

  6. JAVA变量声明在循环体内还是循环体外

    (1) for (int i = 0; i < 10000; ++i) { Object obj = new Object(); System.out.println("obj= &q ...

  7. js对象的深拷贝及其的几种方法

    深拷贝和浅拷贝是javascript中一个比较复杂的问题,也是面试官最喜欢问的问题之一,通过这个为可以看出是否入门,深拷贝和浅拷贝也是初学者经常犯错一个点. 简单来说深拷贝是拷贝储存在栈中的对象,而浅 ...

  8. 5G手机来了，但这些问题让其短期内难以成为“香饽饽”

    在5G手机喊了太长时间后,其终于在近日不断亮相. 此前据中国质量认证中心官网显示,共有8款5G手机获得3C认证--华为4款,一加.中兴.OPPO和vivo各有一款.随着首批5G手机通过3C认证,意味着 ...

  9. Java下载文件时文件名中的中文变成下划线，其他正常

    将 utf-8 转换成 ISO8859-1 编码 response.addHeader("Content-Disposition", "attachment;filena ...

  10. nmon+python 基于AIX系统数据分析

    https://sourceforge.net/projects/pynmongraph/ github :https://github.com/madmaze/pyNmonAnalyzer nmon ...