使用ExtJS技术实现的拖动树结点


Posted in Javascript onAugust 05, 2010

一、结点拖放的位置
拖放结点包含了两个动作,拖(drag)和放(drop)。拖很好理解,就是将结点拖起来,拖哪一个结点的效果都是一样的。不过放结点就比较复杂了。放结点可分为如下两种情况:

追加(append)结点:如果将拖动的结点正好放在非叶子结点的上面,TreePanel组件会将这个结点移动到非叶子结点下面作为该结点的子结点。由于TreePanel的限制,叶子结点不能append。
在同一层做上下移动(above和below): 如果将拖动的结点放在叶子结点上,或放在非叶子结点的侧面,会将拖动结点作为兄弟结点来放置。
下面的设置将TreePanel组件设为结点可拖动状态。

在浏览器地址栏中输入如下的URL:
http://localhost:8080/netdisk/tree/drapdrop.html
当显示出树形结点时,按上面的拖动方法来拖动结点,会出现如图1、图2和图3所示的拖动效果。
使用ExtJS技术实现的拖动树结点
        图1  【英语】结点将作为【计算机】的子结点
使用ExtJS技术实现的拖动树结点
图2  【英语】结点将作为【计算机】的兄弟结点,并移到【计算机】结点的前面(above拖放
使用ExtJS技术实现的拖动树结点
           图3  两个叶子结点交互位置(below拖放)
二、使叶子结点可以append

在默认情况下,TreePanel规定叶子结点不允许append。不管这个限制合理还是不合理,为了保持ExtJS版本的兼容性,读者应尽量不修改ExtJS的源代码。不过有时需要在叶子结点上append。那么在这种情况下,我们可以通过TreePanel的nodedragover事件来解决。
TreePanel会在内部判断,如果结点的leaf参数为true,则会允许该结点append。了解了TreePanel禁止结点append的原理,就很容易通过nodedragover事件来解决这个问题。
在nodedragover事件方法中有一个参数,通过该参数值的target属性可以获得拖动结点放置的目标结点。并在nodedragover方法中将该结点的leaf属性值设为false,代码如下:

tree.on("nodedragover", function(e){ 
var node = e.target; 
if(node.leaf) 
node.leaf=false; 
return true; 
});

在浏览器地址栏中输入如下的URL:
http://localhost:8080/netdisk/tree/leafappend.html
显示树形结构后,将某个结点拖动到叶子结点处,然后放下,就会在叶子结点下生成一个子结点,而且叶子结点的图标会变成非叶子结点的图标,如图4所示。

使用ExtJS技术实现的拖动树结点
                图4  使叶子结点可以append

除此之外,树结点还有其他的拖动方式,内容请见
《人人都玩开心网:Ext JS+Android+SSH整合开发Web与移动SNS》 一书的相关章节。

 

 

《Android/OPhone开发完全讲义》(本书版权已输出到台湾)

 样章和目录下载
 
互动网  当当网  卓越亚马逊

《人人都玩开心网:Ext JS+Android+SSH整合开发Web与移动SNS》
 样章下载
 互动网

 乐博Android手机客户端(新浪微博)发布

Javascript 相关文章推荐
实现连缀调用的map方法(prototype)
Aug 05 Javascript
js动态控制table的tr、td增加及删除的具体实现
Apr 30 Javascript
jQuery原生的动画效果
Jul 10 Javascript
JavaScript中数组继承的简单示例
Jul 29 Javascript
JavaScript对HTML DOM使用EventListener进行操作
Oct 21 Javascript
jquery插件jquery.LightBox.js实现点击放大图片并左右点击切换效果(附demo源码下载)
Feb 25 Javascript
angular仿支付宝密码框输入效果
Mar 25 Javascript
jQuery插件开发发送短信倒计时功能代码
May 09 jQuery
浏览器调试动态js脚本的方法(图解)
Jan 19 Javascript
Layui给数据表格动态添加一行并跳转到添加行所在页的方法
Aug 20 Javascript
LayUi使用switch开关,动态的去控制它是否被启用的方法
Sep 21 Javascript
React实现全选功能
Aug 25 Javascript
JavaScript 获取当前时间戳的代码
Aug 05 #Javascript
firefox事件处理之自动查找event的函数(用于onclick=foo())
Aug 05 #Javascript
Js获取事件对象代码
Aug 05 #Javascript
zeroclipboard复制到剪切板的flash
Aug 04 #Javascript
jQuery Study Notes学习笔记 (二)
Aug 04 #Javascript
JQuery Study Notes 学习笔记(一)
Aug 04 #Javascript
jQuery dialog 异步调用ashx,webservice数据的代码
Aug 03 #Javascript
You might like
laravel http 自定义公共验证和响应的方法
2019/09/29 PHP
PHP使用gearman进行异步的邮件或短信发送操作详解
2020/02/27 PHP
fireworks菜单生成器mm_menu.js在 IE 7.0 显示问题的解决方法
2009/10/20 Javascript
JavaScript中用字面量创建对象介绍
2014/12/31 Javascript
基于JavaScript实现生成名片、链接等二维码
2015/09/20 Javascript
AngularJS中$http服务常用的应用及参数
2016/08/22 Javascript
js实现控制textarea输入字符串的个数,鼠标按下抬起判断输入字符数
2016/10/25 Javascript
nodeJS删除文件方法示例
2016/12/25 NodeJs
jquery实现左右轮播图效果
2017/09/28 jQuery
JavaScript实现修改伪类样式
2017/11/27 Javascript
JavaScript定义及输出螺旋矩阵的方法详解
2017/12/01 Javascript
nodejs操作mongodb的填删改查模块的制作及引入实例
2018/01/02 NodeJs
vue通过指令(directives)实现点击空白处收起下拉框
2018/12/06 Javascript
javascript json字符串到json对象转义问题
2019/01/22 Javascript
turn.js异步加载实现翻书效果
2019/07/25 Javascript
用云开发Cloudbase实现小程序多图片内容安全监测的代码详解
2020/06/07 Javascript
keep-Alive搭配vue-router实现缓存页面效果的示例代码
2020/06/24 Javascript
详解Python3.1版本带来的核心变化
2015/04/07 Python
Python 调用Java实例详解
2017/06/02 Python
利用python编写一个图片主色转换的脚本
2017/12/07 Python
Python编程求解二叉树中和为某一值的路径代码示例
2018/01/04 Python
python正则中最短匹配实现代码
2018/01/16 Python
python批量设置多个Excel文件页眉页脚的脚本
2018/03/14 Python
使用pandas实现连续数据的离散化处理方式(分箱操作)
2019/11/22 Python
如何基于python实现归一化处理
2020/01/20 Python
Python Selenium异常处理的实例分析
2021/02/28 Python
CSS3图片旋转特效(360/60/-360度)
2013/10/10 HTML / CSS
西班牙太阳镜品牌:Hawkers
2018/03/11 全球购物
C#和SQL Server的面试题
2016/08/12 面试题
行政主管岗位职责
2013/11/18 职场文书
马智宇结婚主持词
2014/04/01 职场文书
文案策划求职信
2014/04/14 职场文书
保护环境建议书400字
2014/05/13 职场文书
爱与责任演讲稿
2014/05/20 职场文书
NGINX 权限控制文件预览和下载的实现原理
2022/01/18 Servers
Mysql中@和@@符号的详细使用指南
2022/06/05 MySQL