Tree에서 div로 드래그

Question

extJs TreePanel에서 페이지 본문의 div로 드래그 앤 드롭 Senario를 구현하려고합니다. 나는 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

번째 PARAM로 true을 추가하는 경우에 여기 차이 참조. 요소의 경우보다 일반적인 값은 el입니다. 기능적으로는 상관 없지만 Ext32 코드를 사용하여 DropTarget 생성자로 전달 된 e을 보았던 누군가에게 이상하게 보입니다.

Answer 2

작동 드롭 대상입니다 - 당신이 할 수있는 틀렸어.

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

은 화장품 참고로, 매개 변수 이름 e 종래 (notifyDrop 번째 인수 같이) 이벤트 객체를 나타낸다 :

Answer 3

ExtZone에 ExtZone을 설정할 수 없다는 것을 알고 있습니다. 그래서 이것이 당신 문제 일 수 있습니다. DropZone 대신 DropTarget을 사용해보십시오.