使用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 相关文章推荐
QQ邮箱的一个文本编辑器代码
Mar 14 Javascript
javascript 控制 html元素 显示/隐藏实现代码
Sep 01 Javascript
jQuery动态添加、删除元素的方法
Jan 09 Javascript
js 获取时间间隔实现代码
May 12 Javascript
JavaScript搜索字符串并将搜索结果返回到字符串的方法
Apr 06 Javascript
JavaScript输入分钟、秒倒计时技巧总结(附代码)
Aug 17 Javascript
详解使用 Node.js 开发简单的脚手架工具
Jun 08 Javascript
详解如何使用koa实现socket.io官网的例子
Nov 04 Javascript
vue + element-ui的分页问题实现
Dec 17 Javascript
微信小程序开发之左右分栏效果的实例代码
May 20 Javascript
Vue CL3 配置路径别名详解
May 30 Javascript
浅谈JavaScript窗体Window.ShowModalDialog使用
Jul 22 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
PHP Header用于页面跳转要注意的几个问题总结
2008/10/03 PHP
PHP基于cookie与session统计网站访问量并输出显示的方法
2016/01/15 PHP
PHP实现获取并生成数据库字典的方法
2016/05/04 PHP
laravel实现图片上传预览,及编辑时可更换图片,并实时变化的例子
2019/11/14 PHP
简单的Jquery遮罩层代码实例
2013/11/14 Javascript
jquery 实现input输入什么div图层显示什么
2014/06/15 Javascript
nodeJS代码实现计算交社保是否合适
2015/03/09 NodeJs
浅析jQuery移动开发中内联按钮和分组按钮的编写
2015/12/04 Javascript
深入浅析JS Function()构造函数
2016/08/22 Javascript
jQuery插件HighCharts实现的2D面积图效果示例【附demo源码下载】
2017/03/15 Javascript
微信小程序学习笔记之获取位置信息操作图文详解
2019/03/29 Javascript
React 全自动数据表格组件——BodeGrid的实现思路
2019/06/12 Javascript
如何提升vue.js中大型数据的性能
2019/06/21 Javascript
微信小程序自定义联系人弹窗
2020/05/26 Javascript
[01:00:14]DOTA2官方TI8总决赛纪录片 真视界True Sight
2019/01/16 DOTA
python爬取w3shcool的JQuery课程并且保存到本地
2017/04/06 Python
python爬虫框架scrapy实战之爬取京东商城进阶篇
2017/04/24 Python
Python数据结构与算法之图的广度优先与深度优先搜索算法示例
2017/12/14 Python
Python中栈、队列与优先级队列的实现方法
2019/06/30 Python
Python字典推导式将cookie字符串转化为字典解析
2019/08/10 Python
Python配置文件处理的方法教程
2019/08/29 Python
pytorch 计算ConvTranspose1d输出特征大小方式
2020/06/23 Python
CSS3实现粒子旋转伸缩加载动画
2016/04/22 HTML / CSS
CSS3不透明度实例讲解
2016/04/26 HTML / CSS
使用CSS3的box-sizing属性解决div宽高被内边距撑开的问题
2016/06/28 HTML / CSS
新西兰第一的行李箱网站:luggage.co.nz
2019/07/22 全球购物
生物化工专业个人自荐信
2013/09/26 职场文书
上课迟到检讨书100字
2014/01/11 职场文书
毕业生大学生活自我总结
2014/01/31 职场文书
吃空饷专项治理工作实施方案
2014/03/04 职场文书
同学会主持词
2014/03/18 职场文书
幼儿园班级工作总结2015
2015/05/25 职场文书
导游词之苏州盘门景区
2019/11/12 职场文书
ES6 解构赋值的原理及运用
2021/05/25 Javascript
试了下Golang实现try catch的方法
2021/07/01 Golang
十大最强妖精系宝可梦,哲尔尼亚斯实力最强,第五被称为大力士
2022/03/18 日漫