<!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. 题解【Vijos1159】岳麓山上打水

    题面 迭代加深搜索模板题. 注意开始时要先对桶的容量从小到大排序. 达到搜索层数时使用完全背包\(\text{check}\)即可. 具体实现参考代码. #include <bits/stdc+ ...

  2. Postgresql 教程

    Official 教程 关闭postgresql服务 PostgreSQL帐号 1. PostgreSQL 用户帐号和操作系统用户帐号是不同的,系统用户帐号是postgres. sudo -u pos ...

  3. 最近手机价格全线暴跌真的只是因为5G要来了吗？

    等等党,是一群数量颇大的消费群体.他们的消费习性是绝不买刚上市的新品,而是一直等.等到他们认为产品的价格已经跌无可跌,或者性价比十足的时候再出手.不得不说,与早买早享受的尝鲜消费群体相比,等等党代表了 ...

  4. 【转载】 __declspec(dllexport) 和__declspec(dllimport)

    转自:http://www.cppblog.com/Dutyboy/archive/2010/11/15/133699.html __declspec(dllexport)   __declspec( ...

  5. Dapper简介

    Dapper文档 一,介绍:Dapper是一款轻量级ORM工具.如果你在小的项目中,使用Entity Framework.NHibernate 来处理大数据访问及关系映射,未免有点杀鸡用牛刀.你又觉得 ...

  6. css美化Div边框的样式实例*（转载）

    css美化Div边框的样式实例   很多时候如果不是用了很多样式,很难把边框修饰得好看,看了一篇博文,觉得真的挺漂亮,也挺好看. 转载的博文地址 将这段美化的css代码 border:1px soli ...

  7. 常见python面试题

    1,简述列举了解的编程语言及语言间的区别? Python 解释型语言,代码简洁,易懂 C语言 编译型语言,底层语言 c++ 编译型语言,在C语言基础上加了面向对象 Java 混合型语言,可拓展性高 G ...

  8. koa2第一天 安装koa2

    安装全局koa2:npm install -g koa2 -generator 创建一个koa2文件夹:koa2 -e koa2 进入koa2文件夹:cd koa2 安装npm模块:npm insta ...

  9. lighting

    lighting lighting 是基于 nodejs 构建的一个命令行工具,使用 lighting 可以快速搭建 H5.APP.RestAPI 的开发工程环境(结合 VSCode 最佳).本地开发 ...

  10. springboot+jwt

    大概了解下SpringMVC和jwt,百度 代码: 1.整体框架 2.controller package com.yiyezhiqiu.jwt.jwt.controller; import com. ...