ztree-拖拽（排序树）
<!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-拖拽（排序树）的更多相关文章
- zTree的拖拽排序
ztree本身是可以支持拖拽的,但是却没有找到明确的支持拖拽的排序,也就是说,在拖拽过程中,需要自定义维护拖拽后的顺序并保存至后台. 在这样一个比较常规的需求情况下,网上也有朋友给出了一些解决方案,比 ...
- ztree使用系列四（ztree实现同级拖拽排序并将排序结果保存数据库）
ztree这个系列的最后一篇,也是ztree功能强大的体现之中的一个--排序功能. ztree能够实现全部节点之间任意的拖拽排序功能.我这里依据须要实现了仅仅同意同级之间任意拖拽排序,事实上原理都一样 ...
- easyui树节点拖拽排序的存储过程
easyui树的拖拽排序功能 easyui树中有拖拽功能 树结构如下: 一个行政区域对应一个单位,一个单位对应多个部门,每个部门下有相关人员,功能要求: (1)行政区域没有子节点,点击text加载部门 ...
- jQuery可拖拽排序列表jquery-sortable-lists
jquery-sortable-lists可以通过鼠标进行拖动排列树型菜单,可以定义某个列表元素是否拖动,拖动后回调,点击可以折叠树型结点,可以用来在后台模仿wordpress后台拖动菜单,实现多级菜 ...
- dragsort html拖拽排序
一.Jquery List DragSort 对于有些页面,如首页的定制,需要进行动态的拖拽排序.由于自己实现比较困难,我们一般会使用一些js插件来实现.dragsort 就是帮助我们完成这一需求.通 ...
- 使用knockout-sortable实现对自定义菜单的拖拽排序
在开始之前,照例,我们先看效果和功能实现. 关于自定义菜单的实现,这里就不多说了,需要了解的请访问:http://www.cnblogs.com/codelove/p/4838766.html 这里需 ...
- RecyclerView拖拽排序和滑动删除实现
效果图 如何实现 那么是如何实现的呢?主要就要使用到ItemTouchHelper ,ItemTouchHelper 一个帮助开发人员处理拖拽和滑动删除的实现类,它能够让你非常容易实现侧滑删除.拖拽的 ...
- jquery sortTable拖拽排序
所有的事件回调函数都有两个参数:event和ui,浏览器自有event对象,和经过封装的ui对象 ui.helper - 表示sortable元素的JQuery对象,通常是当前元素的克隆对象 ...
- ListView列表拖拽排序
ListView列表拖拽排序能够參考Android源代码下的Music播放列表,他是能够拖拽的,源代码在[packages/apps/Music下的TouchInterceptor.java下]. 首 ...
- RecyclerViewItemTouchHelperDemo【使用ItemTouchHelper进行拖拽排序功能】
版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 记录使用ItemTouchHelper对Recyclerview进行拖拽排序功能的实现. 效果图 代码分析 ItemTouchHel ...
随机推荐
- eclipse 设置不弹出debug调试框
- 怎么编写API和或者自己不属于知识小案例demo程序
再使用一个函数,进行测试的调用,然后进行调用这样就不需要再为makefile什么,还有就是改什么鬼东西烦恼了. 然后把需要的功能进行分解就行了.
- DVWA全级别之File Inclusion（文件包含）
File Inclusion File Inclusion,意思是文件包含(漏洞),是指当服务器开启allow_url_include选项时,就可以通过php的某些特性函数(include(),req ...
- php设计模式之面向过程实现举报功能实例代码
html <html> <head> <meta charset="UTF-8"> <title>责任链模式</title&g ...
- [C++] JsonCPP 的使用 完整配置过程
最近准备开发一个程序 需要用到C++ 解析json 原始的C++解析json是不现实的 自己也写不出来json解析方法(主要是不靠谱) 所以找到了jsoncpp 这个库 但是... 因为各种原因 配置 ...
- Flink流处理（二）- 流处理基本概念
1. Dataflow Programming 在讨论流处理的基本概念之前,我们首先介绍一下数据流编程(dataflow programming)的基本概念与术语. 数据流图 数据流程序一般在由数据流 ...
- HTML学习（4）属性
属性是HTML元素提供的附加信息,大多数标签都能设置属性,一般位于开始标签,以名称/值的方式出现,例:name="value". 值要放在引号内(单引号.双引号都可以),如果值包含 ...
- jenkins新建任务详解
一.新建任务 点击左侧新建任务 输入任务名称-->选择构建一个自由风格的软件项目-->确认 进入任务配置页面 二.基本配置 General 配置构建保留天数,保留个数,必要时并发构建 源码 ...
- C#中数据类型char*，const char*和string的三者转换
C#中数据类型char*,const char*和string的三者转换: . const char* 和string 转换 () const char*转换为 string,直接赋值即可. EX: ...
- LabVIEW随笔2_毕业了
08年研究生毕业了,在原来公司的兼职也结束了,开始真正的工作生涯了. 在此,非常感恩我的导师綦院长,体谅我的困楚之处,在我的研究生学习期间给予我的宽容和照顾.不料,2014年,恩师五十有余,却突然离世 ...