Ext.DD portal示例

Ext.DD 子模块是很好的对拖放这样一个实现起来很麻烦的功能的封装，架构很清晰，接口很明确.最终使用 DropZone 与 DragZone即可.

 

----------------------------
DragDrop
  DDTarget
    DropTarget
      DropZone
-----------------------------
DragDrop
  DD
    DDProxy
      DragSource
        DragZone

 

官方单独使用的例子比较少，今天阅读拖放模块源代码后，稍微熟悉一下与拖放模块的交互接口，写了个单独使用的例子：

简单拖放@google code

 

简单拖放源码@google code

portal演示@google code

 

portal源码@google code

jquery portal 比较：(转自javaeye网友)

 

jq portal演示@google code

 

jq portal源码@google code

 

细节体会：

1. Ext.DD 没有采用事件机制，仅仅采用 override 方法来实现通知。

2. DropZone 有容器以及容器内多个可drop区域的概念，容器通过 notifyOver 再通知各个 drop 区域,在每个通知中我们只需考虑当前是否在单个drop子区域并进行处理，不需要考虑整个容器，而注册时只需要对容器进行拖放注册，只需指明哪些属于应该关注的子区域， 基本上还是事件委托的理念，不用对个个子区域监听mousedown事件，改做容器监听。

 

3. Jquery 方式可见没有采用事件委托，对每个子区域都单独定义了拖放事件，并且也没有公用拖放代理对象，可见Ext.DD当拖放对象极多时还是性能应该会更好一点。

4. 例子expamles/dd/dragdropzones.js 存在bug ：

getDragData: function(e) {
            var sourceEl = e.getTarget(v.itemSelector, 10);
            if (sourceEl) {
                d = sourceEl.cloneNode(true);
                d.id = Ext.id();
                return v.dragData = {
                    sourceEl: sourceEl,
                    repairXY: Ext.fly(sourceEl).getXY(),
                    ddel: d,
                    patientData: v.getRecord(sourceEl).data
                }
            }
        },

 

ddel 当 invalid drag drop时，会发生 ddel.highlight 。
若传 d 则 highight 不会有效果（在复制节点上）。
修正：

 

var sourceEl = e.getTarget(v.itemSelector, 10);
            if (sourceEl) {
                               return v.dragData = {
                    sourceEl: sourceEl,
                    repairXY: Ext.fly(sourceEl).getXY(),
                    ddel: sourceEl,
                    patientData: v.getRecord(sourceEl).data
                }
            }

 

其实 DragZone 已经clone了：

onInitDrag : function(x, y){
        this.proxy.update(this.dragData.ddel.cloneNode(true));
        this.onStartDrag(x, y);
        return true;
    },

 

但是做的不好，可能clone出重复 id 节点。
修正：

 

onInitDrag : function(x, y){
        var t=this.dragData.ddel.cloneNode(true);
         t.id=Ext.id();// prevent duplicate ids
        this.proxy.update(t);
        this.onStartDrag(x, y);
        return true;
 },

 

extjs 例子没有修改 DragZone ，而为了防止重 id ，在例子中自己clone，但是失去了 highlight 的效果.

评论

1 楼 yiminghe 2012-05-08  

superchinaren 写道

请问在拖动时鼠标点击的位置与拖动的对象不一致这个问题怎么解决。比如我在一个DIV的正中间点击后再拖动。此时鼠标指针自动给移动到了DIV的最左上角。

可以换 kissy 试试 ：）

http://docs.kissyui.com/kissy/src/dd/demo/portal.html