<!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. 2019-08-02 纪中NOIP模拟B组

    T1 [JZOJ1420] 佳肴 题目描述 佳肴就是非常美味的菜的意思,佳肴最关键的是选择好原料. 现在有N种原料,每种原料都有酸度S和苦度B两个属性,当选择多种原料时,总酸度为每种原料的酸度之积,总 ...

  2. Reading Comprehensive

    我是红色 When I re-entered the full-time workforce a few years ago after a decade of solitary[隐士,独居] sel ...

  3. vue项目接入百度地图

    方法一 :使用第三方工具 vue-baidu-map 安装命令: yarn add vue-baidu-map --save 文档地址:https://dafrok.github.io/vue-bai ...

  4. qt5.9.0 msvc2015优雅的崩溃：dumpfile

    交给客户的软件奔溃了怎么办? 我们不能再客户电脑上安装vs,也不想傻傻的用log来猜测出错的地方. 利用Dbghelp可以解决这一问题. 首先是vs生成release版本的时候需要同时生成pdb文件, ...

  5. Bugku-CTF之求getshell

    Day31 求getshell   http://123.206.87.240:8002/web9/      

  6. 记录一下自己搭建springboot+mybatis+druid 多数据源的过程

    前言  上次的一个项目(springboot+mybatis+vue),做到后面的时间发现需要用到多数据源.当时没有思路..后来直接用了jdbc来实现.这几天不是很忙,所以决定自己再搭建一次.不多说, ...

  7. 简单json 转换为 map、对象

    1.如果转换的是Map.或者是简单的对象 package com.gc.action; import java.util.Map; import net.sf.json.JSONObject; /** ...

  8. AD 快捷键设置

    TAA 设置自动标记原件位号 AR 设置元件向右对齐 AL 设置元件向左对齐 MS 移动所选择 CO 错误报告设置 CTRL + w 设置电气线 PN 添加net label TG 打开封装管理器 P ...

  9. HahMap相关问题

    概述 文章对HashMap的部分细节进行介绍,JDK1.7之前有可能出现环形表的问题,而1.7之后进行了改进,文章对环形表现象的出现进行了解析,然后对HashMap注意的几个问题进行了解答. Hash ...

  10. 【10】DP青蛙跳台阶

    一只青蛙一次可以跳上1级台阶,也可以跳上2级台阶.求该青蛙跳上一个 n 级的台阶总共有多少种跳法. 答案需要取模 1e9+7(1000000007),如计算初始结果为:1000000008,请返回 1 ...