从树拖到div

我想实现从extJs TreePanel拖放到页面正文中的div。我一直在以萨基here为例。从树拖到div

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

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它不显示为有效的放置目标和降失败。

这是我第一次进入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 
        }); 
       } 
      });

来源

2010-08-01 madcapnmckay

查看是否添加true作为第二PARAM这里有什么差别：

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

作为化妆品说明，PARAM NAME e常规指示事件对象（如在notifyDrop第二ARG）。对于一个元素，el更为典型。在功能上没有关系，但看起来有点奇怪，以致有人用Ext代码将e传递给DropTarget构造函数。

来源

2010-08-02 00:09:02

谢谢，但这似乎没有任何区别。这在JQuery中会很容易！因此，正在创建放置目标并正确存储在contentAreas数组中。但即使认为团队是一样的，这个下降也是无效的。有没有一个函数来决定是否有效，我可以重写呢？有任何想法吗？ – madcapnmckay 2010-08-02 19:44:54

您的代码一目了然。有时使用CompositeElements/flyweight对象（相对于具有true arg的完整元素）不能像预期的那样工作，但这只是一个猜测。如果你能展示你的HTML样本，我敢打赌，我可以很容易地为你解决它。很可能你的select没有返回有效的元素，或者出于某种原因DropTargets没有被这些元素正确初始化。 – 2010-08-02 22:23:14

- 你可以不会出错。

来源

2010-08-01 19:48:56 Zaz

这基本上是我所做的，但做了最后的改变，让div不能由extJs创建是什么打破了它，我不知道为什么。 – madcapnmckay 2010-08-01 22:22:49

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

来源

2011-02-08 16:17:05 vitexua

这应该是评论而不是答案。 – 2012-11-30 04:43:15

从树拖到div

回答

相关问题