使用ExtJS技术拖动树节点

一、节点拖放的位置拖放节点涉及两个动作，拖放。拖动很容易理解，就是拖动一个节点，拖动任何节点的效果都是一样的。但是放节点更复杂。放置节点可以分为以下两种情况：追加节点：如果拖动的节点正好放在非叶节点的上方，则TreePanel组件会将该节点移动到非叶节点的下方，作为该节点的子节点。由于TreePanel的限制，无法追加叶节点。在同一级别上下移动(上下):如果拖动的节点放置在叶节点上或非叶节点的一侧，则拖动的节点将被放置为同级节点。以下设置将树形面板组件设置为节点可拖动状态。在浏览器地址栏中输入以下网址：http://localhost 33608080/netdisk/tree/drap drop . html当树节点显示出来后，按照上面的拖拽方法拖拽节点，会出现图1、图2、图3所示的拖拽效果。

图1【英文】该节点将是【计算机】的子节点。

图2【英文】该节点将作为【计算机】的兄弟节点，移动到【计算机】节点的前面(拖放上方)。

图3两个叶节点的交互位置(下面拖放)2。使叶节点追加默认情况下，TreePanel规定不允许追加叶节点。无论这个限制是合理的还是不合理的，为了保持ExtJS版本的兼容性，读者应该尽量不要修改ExtJS的源代码。但是，有时需要在叶节点上追加。在这种情况下，我们可以通过TreePanel的nodedragover事件来解决。TreePanel会在内部进行判断，如果一个节点的leaf参数为true，则允许该节点追加。理解TreePanel禁止节点追加的原理，可以很容易地通过nodedragover事件解决这个问题。nodedragover事件方法中有一个参数，通过参数值的target属性可以得到被拖动节点所在的目标节点。nodedragover方法中，该节点的叶子属性值设置为false，代码如下：复制代码如下：tree.on ('nodedragover '，函数(e){ var node=e . target；如果(node . leaf)node . leaf=false；返回真；});在浏览器地址栏输入如下网址：http://localhost 33608080/netdisk/tree/leaf append . html显示树结构后，将一个节点拖到叶子节点上，再放下，叶子节点下会生成一个子节点，叶子节点的图标会变成非叶子节点的图标，如图4所示。

图4能够附加叶节点。此外，还有其他拖动树节点的方法。详见《人人都玩开心网：Ext JS+Android+SSH整合开发Web与移动SNS》册相关章节。003010(本书版权已出口台湾省)样章及目录下载互动网当当卓越亚马逊《Android/OPhone开发完全讲义》样章下载互动网莱博安卓手机客户端(新浪微博)发布。