EasyUI Tree节点拖动到指定容器
效果图:将tree节点拖动到指定的DIV中,结果显示节点的id和text
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Drag Drop Tree Nodes - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
<link rel="stylesheet" type="text/css" href="../demo.css">
<script type="text/javascript" src="../../jquery.min.js"></script>
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
<h2>Drag Drop Tree Nodes<input type="button" onclick="enableDragg();" value="允许拖动" /><input type="button" onclick=" disableDragg();" value="禁止拖动" /></h2>
<p>Press mouse down and drag a node to another position.</p>
<div style="margin: 20px 0;"></div>
<div class="easyui-panel" style="padding: 5px">
<ul class="easyui-tree" data-options="url:'tree_data1.json',method:'get',animate:true,dnd:false" id="tree"></ul>
</div>
<div id="drop" style="height: 200px; border: 1px green solid; margin-top: 5px;"></div>
</body>
</html>
<script type="text/javascript">
$(function () {
$('#drop').droppable({
onDrop: function (e, source) {
var node = $('#tree').tree('getNode', source);
$(this).append("<div>node.id:" + node.id + ", node.text:" + node.text + "</div>");
}
}); $('#tree').on({
mouseover: function (e) {
var target = e.target;
if (target.tagName == 'SPAN') target = target.parentNode;
$(target).draggable({
revert: true,
proxy: 'clone',
disabled: false
})
},
click: function (e) {
var target = e.target;
if (target.tagName == 'SPAN') target = target.parentNode;
if (target.tagName == 'LI') target = $(target).find('div:first')[0];
$(this).tree('toggle',target);
}
});
}); function enableDragg() {
$('.tree-node').draggable({
revert: true,
proxy: 'clone',
disabled: false
});
};
function disableDragg() {
$('.tree-node').draggable({
disabled: true
});
}
</script>
说明:
使用“允许拖动”按钮进行设置拖动时需要在树加载后才生效
使用on方式设置则不需要等待树加载完成即可,但测试中发现单击展开/收缩节点功能失效,加了个click方法,还是要双击才生效,需要改进。
EasyUI Tree节点拖动到指定容器的更多相关文章
- 判断easyUI tree 节点复选框是否被选中的方法。将选中的节点高亮显示的方法
在datagrid tree中如何判断某个节点的复选框是否被选中? 我们可以通过HTML结构去分析: 1.节点未选中前 2.节点选中后 所以节点被选中前和选中后,html中的class类是用区分的. ...
- Easyui Tree方法扩展 - getLevel(获取节点级别)
Easyui Tree一直就没有提供这个方法,以前没有用到,所以一直没怎么在意,这次自己用到了,顺便扩展了一个方法,分享给大家. $.extend($.fn.tree.methods, { getLe ...
- EasyUI Tree判断节点是否是叶
方法1: $('#domaincatalog').tree('isLeaf', node.target); 返回true或false ,true表示是叶节点, false即不是 方法2:官方文档中: ...
- 原创: EasyUI Tree 最后一级 节点 横向排列
原创: EasyUI Tree 最后一级 节点 横向排列 转载请指明出处 必须要写在: onLoadSuccess 事件中 ddAuthTree.tree({ lines: true, checkb ...
- 【原】无脑操作:EasyUI Tree实现左键只选择叶子节点、右键浮动菜单实现增删改
Easyui中的Tree组件使用频率颇高,经常遇到的需求如下: 1.在树形结构上,只有叶子节点才能被选中,其他节点不能被选中: 2.在叶子节点上右键出现浮动菜单实现新增.删除.修改操作: 3.在非叶子 ...
- easyui Tree模拟级联勾选cascadeCheck,节点选择,父节点自动选中,节点取消,父节点自动取消选择,节点选择,所有子节点全部选择,节点取消,所有子节点全部取消勾选
最近项目中用到easyui tree,发现tree控件的cascadeCheck有些坑,不像miniui 的tree控件,级联勾选符合业务需求,所以就自己重新改写了onCheck事件,符合业务需求.网 ...
- EasyUI tree 选中父节点子节点全部选中,选中子节点父节点不选中
需求:EasyUI tree 选中父节点子节点全部选中,选中子节点父节点不选中 效果: /** * 给树增加onCheck事件,首先使用cascadeCheck:false属性禁止全选, ...
- Jquery EasyUI Combotree和 EasyUI tree展开所有父节点和获取完整路径
Jquery EasyUI Combotree展开所有父节点 Jquery EasyUI Combotree获取树完整路径 Jquery EasyUI tree展开所有父节点 Jquery EasyU ...
- easyui tree扩展tree方法获取目标节点的一级子节点
Easyui tree扩展tree方法获取目标节点的一级子节点 /* 只返回目标节点的第一级子节点,具体的用法和getChildren方法是一样的 */ $.extend($.fn.tree.meth ...
随机推荐
- Redis简单示例
1.Redis是一个开源的使用ANSI C语言编写.支持网络.可基于内存亦可持久化的日志型.Key-Value数据库,并提供多种语言的API. 从2010年3月15日起,Redis的开发工作由VMwa ...
- 正则双重过滤 /// splitKey1 第一个正则式匹配 /// splitKey2 匹配结果中再次匹配进行替
/// <summary> /// 正则双重过滤 /// splitKey1 第一个正则式匹配 /// splitKey2 匹配结果中再次匹配进行替换 /// </summary&g ...
- 【Linux】磁盘读写 测试
一.如何查看当前磁盘的IO使用情况 使用命令:iotop Total DISK READ: 3.89 K/s | Total DISK WRITE: 0.00 B/s TID PRIO USER DI ...
- RobotFrameWork接口项目分层及通用控制方式
1. 前言 上一篇文章介绍了在设计接口用例之前应遵守的设计规范,详见<RobotFramework接口设计规范>,当然读者公司的内部规范也不一定非得完全遵循笔者所提到的,适合自己公司内部的 ...
- (原)DropBlock A regularization method for convolutional networks
转载请注明出处: https://www.cnblogs.com/darkknightzh/p/9985027.html 论文网址: https://arxiv.org/abs/1810.12890 ...
- Elasticsearch索引mapping的写入、查看与修改(转)
mapping的写入与查看 首先创建一个索引: curl -XPOST "http://127.0.0.1:9200/productindex" {"acknowledg ...
- 物联网架构成长之路(27)-Docker练习之Zookeeper安装
0. 前言 准备了解一下消息队列MQ,对比了一些开源的中间件,最后选择Kafka作为以后用到的消息队列,消息队列的应用场景及Kafka与其他消息队列的优缺点这里就不细说了,具体的可以参考其他博客说明. ...
- 9-11-Trie树/字典树/前缀树-查找-第9章-《数据结构》课本源码-严蔚敏吴伟民版
课本源码部分 第9章 查找 - Trie树/字典树/前缀树(键树) ——<数据结构>-严蔚敏.吴伟民版 源码使用说明 链接☛☛☛ <数据结构-C语言版>(严蔚 ...
- EntityFramework安装失败
PM> Install-Package EntityFramework正在尝试收集与目标为“.NETFramework,Version=v4.0”的项目“ConsoleApplication1” ...
- WPF ViewModelLocator
在WPF中应用ViewModelLocator <Window x:Class="Demo.Views.MainWindow" ... xmlns:prism="h ...