從樹拖到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

回答

相關問題