Question

我正在尝试将一个从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
                    });
                } 
            });

Answer 1

查看添加true作为第二个参数是否有所不同：

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

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

Answer 2

如果您在复制诸如此类的工作示例时遇到问题，请复制整个内容，然后逐行修改它 - 您不会出错。

Answer 3

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

从Tree拖动到div

3 个答案: