使用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 相关文章推荐
基于jquery的让textarea自适应高度的插件
Aug 03 Javascript
拉动滚动条加载数据的jquery代码
May 03 Javascript
js判断鼠标同时离开两个div的思路及代码
May 31 Javascript
使用grunt合并压缩js和css文件的方法
Mar 02 Javascript
JS作用域链详解
Jun 26 Javascript
JavaScript+HTML5实现的日期比较功能示例
Jul 12 Javascript
jQuery列表检索功能实现代码
Jul 17 jQuery
阿里大于短信验证码node koa2的实现代码(最新)
Sep 07 Javascript
javascript+html5+css3自定义弹出窗口效果
Oct 26 Javascript
vuejs中监听窗口关闭和窗口刷新事件的方法
Sep 21 Javascript
vue中使用axios post上传头像/图片并实时显示到页面的方法
Sep 27 Javascript
值得收藏的八个常用的js正则表达式
Oct 19 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
解析dedecms空间迁移步骤详解
2013/05/15 PHP
织梦sitemap地图实时推送给百度的教程
2015/08/03 PHP
PHP验证码生成原理和实现
2016/01/24 PHP
php+jQuery+Ajax简单实现页面异步刷新
2016/08/08 PHP
微信网页授权(OAuth2.0) PHP 源码简单实现
2016/08/29 PHP
Ajax中的JSON格式与php传输过程全面解析
2017/11/14 PHP
PHP safe_mode开启对于PHP系统函数有什么影响
2020/11/10 PHP
Thinkphp极验滑动验证码实现步骤解析
2020/11/24 PHP
js控制input框只读实现示例
2014/01/20 Javascript
点击标签切换和自动切换DIV选项卡
2014/08/10 Javascript
javascript比较两个日期相差天数的方法
2015/07/24 Javascript
jQuery+css实现的tab切换标签(兼容各浏览器)
2016/01/28 Javascript
Jquery attr()方法 属性赋值和属性获取详解
2016/04/15 Javascript
Bootstrap 填充Json数据的实例代码
2017/01/11 Javascript
微信小程序发布新版本时自动提示用户更新的方法
2019/06/07 Javascript
vue使用nprogress加载路由进度条的方法
2020/06/04 Javascript
[03:00]《DAC最前线》之欧美新秀VS老将
2015/02/01 DOTA
python中二维阵列的变换实例
2014/10/09 Python
python实现linux下使用xcopy的方法
2015/06/28 Python
Python subprocess模块常见用法分析
2018/06/12 Python
解决Pycharm的项目目录突然消失的问题
2020/01/20 Python
使用wxpy实现自动发送微信消息功能
2020/02/28 Python
sklearn的predict_proba使用说明
2020/06/28 Python
Pycharm操作Git及GitHub的步骤详解
2020/10/27 Python
css3遮罩层镂空效果的多种实现方法
2020/05/11 HTML / CSS
HTML5之SVG 2D入门4—笔画与填充
2013/01/30 HTML / CSS
html5视频自动横过来自适应页面且点击播放功能的实现
2020/06/03 HTML / CSS
PHP如何去执行一个SQL语句
2016/03/05 面试题
学生会主席就职演讲稿
2014/01/14 职场文书
十八大报告观后感
2014/01/28 职场文书
质检部经理岗位职责
2014/02/19 职场文书
教师暑期培训感言
2014/08/15 职场文书
学校运动会开幕词
2016/03/03 职场文书
Pandas实现DataFrame的简单运算、统计与排序
2022/03/31 Python
Windows下载并安装MySQL8.0.x 版本的完整教程
2022/04/10 MySQL
人工智能深度学习OpenAI baselines的使用方法
2022/05/20 Python