title: Drag from Tree to div
body: <p>I am trying to implement a drag and drop senario from an extJs TreePanel into a div in the body of the page. I have been following an example by Saki <a href="http://examples.extjs.eu/" rel="nofollow noreferrer">here</a>.</p>
  
  <p>So far I have the below code:</p>
  
  <pre><code>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;
              });
  </code></pre>
  
  <p>The drag begins and the div highlights but when I get over the div it does not show as a valid drop target and the drop fails.</p>
  
  <p>This is my first foray into extJS. I'm  JQuery through and through and I am struggling at the moment.</p>
  
  <p>Any help would be appreciated.</p>
  
  <p>Ian</p>
  
  <p><strong>Edit</strong></p>
  
  <p>Furthermore if I create a panel with a drop target in it, this works fine. What is the difference between creating an element and selecting an existing element from the dom. This is obviously where I am going wrong but I'm none the wiser. I have to be able to select existing dom elements and make them into drop targets so the code below is not an option.</p>
  
  <p>Here is the drop target that works</p>
  
  <pre><code>var target = new Ext.Panel({
                  renderTo: document.body
                  ,layout:'fit'
                  ,id:'target'
                  ,bodyStyle:'font-size:13px'
                  ,title:'Drop Target'
                  ,html:'&lt;div class="drop-target" '
                        +'style="border:1px silver solid;margin:20px;padding:8px;height:140px"&gt;'
                        +'Drop a node here. I\'m the DropTarget.&lt;/div&gt;'
  
                  // 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
                      });
                  } 
              }); 
  </code></pre>