从树拖到 div答案

【问题标题】：Drag from Tree to div从树拖到 div
【发布时间】：2010-08-01 19:38:08
【问题描述】：

我正在尝试实现从 extJs TreePanel 拖放到页面正文中的 div 中。我一直在关注 Saki here 的一个例子。

到目前为止，我有以下代码：

var contentAreas = new Array();
var tree = new Ext.tree.TreePanel({
                title : 'Widgets',
                useArrows: true,
                autoScroll: true,
                animate: true,
                enableDrag: true,
                border: false,
                layout:'fit',
                ddGroup:'t2div',
                loader:new Ext.tree.TreeLoader(),
                root:new Ext.tree.AsyncTreeNode({
                    expanded:true,
                    leaf:false,
                    text:'Tree Root',
                    children:children
                }),
                listeners:{
                    startdrag:function() {
                         $('.content-area').css("outline", "5px solid #FFE767");
                    },
                    enddrag:function() {
                        $('.content-area').css("outline", "0");
                    }
                }
            });

            var areaDivs = Ext.select('.content-area', true);
            Ext.each(areaDivs, function(el) {
                var dd = new Ext.dd.DropTarget(el, {
                    ddGroup:'t2div',
                    notifyDrop:function(ddt, e, node) {
                        alert('Drop');
                        return true;
                    } 
                });
                contentAreas[contentAreas.length] = dd;
            });

拖动开始并且 div 突出显示，但是当我越过 div 时，它不会显示为有效的放置目标并且放置失败。

这是我第一次涉足 extJS。我是彻头彻尾的 JQuery，我现在正在苦苦挣扎。

任何帮助将不胜感激。

伊恩

编辑

此外，如果我创建一个带有放置目标的面板，则效果很好。创建元素和从 dom 中选择现有元素有什么区别。这显然是我出错的地方，但我并不聪明。我必须能够选择现有的 dom 元素并将它们变成放置目标，所以下面的代码不是一个选项。

这是有效的放置目标

var target = new Ext.Panel({
                renderTo: document.body
                ,layout:'fit'
                ,id:'target'
                ,bodyStyle:'font-size:13px'
                ,title:'Drop Target'
                ,html:'<div class="drop-target" '
                      +'style="border:1px silver solid;margin:20px;padding:8px;height:140px">'
                      +'Drop a node here. I\'m the DropTarget.</div>'

                // setup drop target after we're rendered
                ,afterRender:function() {
                    Ext.Panel.prototype.afterRender.apply(this, arguments);
                    this.dropTarget = this.body.child('div.drop-target');
                    var dd = new Ext.dd.DropTarget(this.dropTarget, {
                        // must be same as for tree
                         ddGroup:'t2div'

                        // what to do when user drops a node here
                        ,notifyDrop:function(dd, e, node) {
                            alert('drop');
                            return true;
                        } // eo function notifyDrop
                    });
                } 
            });

【问题讨论】：

标签： drag-and-drop extjs

【解决方案1】：

看看在此处添加true 作为第二个参数是否有任何不同：

var areaDivs = Ext.select('.content-area', true);

作为修饰说明，参数名称e 通常表示事件对象（如notifyDrop 的第二个参数）。对于一个元素，el 更为典型。功能上无关紧要，但对于习惯于使用 Ext 代码看到 e 传递到 DropTarget 构造函数的人来说，这看起来很奇怪。

【讨论】：

谢谢，但这似乎没有任何区别。这在 JQuery 中会很容易！因此，放置目标正在正确创建并存储在 contentAreas 数组中。但是即使组相同，下降也是无效的。是否有一个函数可以决定一个 drop 是否有效，我可以覆盖它吗？有什么想法吗？
您的代码一目了然。有时使用 CompositeElements/flyweight 对象（与具有真正 arg 的完整元素相反）对于这样的东西不能按预期工作，但这只是一个猜测。如果你能展示你的 HTML 样本，我敢打赌我可以很容易地为你解决它。很可能您的选择没有返回有效元素，或者由于某种原因没有使用这些元素正确初始化 DropTargets。

【解决方案2】：

如果您在复制这样的工作示例时遇到问题，请复制整个内容，然后根据您的需要逐行修改 - 您不会出错。

【讨论】：

这基本上就是我所做的，但最后的更改是允许 div 不被 extJs 创建，这破坏了它，我不知道为什么。

【解决方案3】：

据我所知，您不能将 DropZone 设置为任何 Ext 元素，只能设置为 Ext 组件。所以这可能是你的问题。尝试使用 DropTarget 而不是 DropZone。

【讨论】：

这应该是评论而不是回答。