title: Drag and Drop into a Scheduler Timeline from a Third Party Component
body: <p>Having read 
  <a href="http://docs.dhtmlx.com/scheduler/dhtmlx_components_integration.html" rel="nofollow noreferrer">this page on external drag and drop</a> at DHTMLX&rsquo;s site, I am concluding that I can drag and drop from an external DHTMLX component but not from a third party or self-written component.</p>
  
  <p>I have included the drag and drop javascript module:</p>
  
  <pre><code>ext/dhtmlxscheduler_outerdrag.js 
  </code></pre>
  
  <p>I have created a dummy event handler:</p>
  
  <pre><code>scheduler.attachEvent("onExternalDragIn", function (id, source, event) {
      return true;
  });
  </code></pre>
  
  <p>I have written a drag event that&rsquo;s attached to my component:</p>
  
  <p><b>html</b>:</p>
  
  <pre><code>&lt;div draggable="{{item.draggable}}" data-itemid="{{item.id}}"
      ondragstart="drag(event, this.getAttribute('data-itemid'))"&gt;
  </code></pre>
  
  <p><b>js</b>:</p>
  
  <pre><code>function drag(ev, itemId) {
      ev.dataTransfer.setData("text", itemId);
  }
  </code></pre>
  
  <p>But... I don&rsquo;t know how to implement <code>drop</code> with the scheduler timeline component. </p>
  
  <p>I have tried this:</p>
  
  <p><b>html</b>:</p>
  
  <pre><code>&lt;div id="scheduler1" class="dhx_cal_container" ondrop="drop(event)" 
      ondragover="allowDrop(event)"&gt;
  </code></pre>
  
  <p><b>js</b>:</p>
  
  <pre><code>function allowDrop(ev) {
      ev.preventDefault();
  }
  
  function drop(ev) {
      ev.preventDefault();
      var data = ev.dataTransfer.getData("text");
  }
  </code></pre>
  
  <p>... but all that does is fire a generic event when I drop something onto the grid. I (obviously) get no information as to which grid cell I&rsquo;ve dropped onto. How would I go about coding this to know which row/column I&rsquo;ve landed on?</p>