<!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. 【HTML】iframe嵌套界面自适应，可高度自由收缩

    最近在做网页时需要使iframe高度自适应,以提高用户体验,网上找了挺多都很复杂,最后找到了这个 HTML: <div class="main_page"> <i ...

  2. Python七夕记

  3. Android 开发 ThreadPool(线程池) 总结

    本文是介绍线程池的基础篇. 一.线程池的作用 创建异步线程的弊端: 1.每次new Thread创建对象,导致性能变差. 2.缺乏统一的管理,可能导致无限制的线程运行,严重的后果就是OOM 或者死机. ...

  4. 安全相关的Linux知识

    本文用于记录在安全中的Linux常用命令,基础命令可以移步去菜鸟教程(https://www.runoob.com/linux/linux-tutorial.html)学习 Linux重要的4个热键 ...

  5. SSH后台分页

    初学SSH,开始用的Struts2+Hibernate3+Spring3,Hibernate中用的HibernateTemplate进行数据库的操作.之后在进行前台页面显示的时候,要用到分页,查了一下 ...

  6. spring boot 2 集成JWT实现api接口认证

    JSON Web Token(JWT)是目前流行的跨域身份验证解决方案.官网:https://jwt.io/本文使用spring boot 2 集成JWT实现api接口验证. 一.JWT的数据结构 J ...

  7. Ubuntu16.04配置

    一.将源更换为国内的源,这样下载和更新软件的速度会快很多.将/etc/apt/sources.list文件的内容更换为如下: #默认注释了源码镜像以提高 apt update 速度,如有需要可自行取消 ...

  8. 百度地图使用http ,https

    通过判断http或https if($_SERVER['REQUEST_SCHEME']=='http'){ return true; }else{ return false; } https网站使用 ...

  9. vs2015制作一个超级简单的MVC项目

    使用vs2015制作一个超级简单的MVC项目   本文链接:https://blog.csdn.net/qq_40919762/article/details/100705314 直奔主题一,创建一个 ...

  10. Led Candle Light - Safe, Cost-Effective, Versatile, Realistic Flame Lighting

    Candles have been used to remove light for centuries, but it took hundreds of years to make better c ...