title: How to .setData/.getData when using jQuery's .trigger('dragstart') for HTML5's drag and drop functionality
body: <h1>When using jQuery's .trigger('dragstart') to fire off a function on an element with the attribute ondragstart=&quot;drag(event)&quot; , how do you .setData/.getData for HTML5's drag and drop on touch device?**</h1>
  <h3>Example flow:</h3>
  <ul>
  <li><em>User drags element with touchmove event</em></li>
  <li>element the two following attributes:
  <ul>
  <li>.bind('touchmove', function(event){$(this).trigger('dragstart');});</li>
  <li>ondragstart=&quot;drag(event)&quot;</li>
  </ul>
  </li>
  <li>the drag(event) attempts to use event.dataTransfer.setData(&quot;Text&quot;, event.target.id);</li>
  <li>the result is the following error.</li>
  <li>&quot;Uncaught TypeError: Cannot read property 'setData' of undefined&quot;</li>
  </ul>
  <p>For mouse event ondragstart, .setData/.getData call in the drag(event) function works fine. However, when firing the ondragstart via .trigger() the .setData/.getData methods do not work properly and an error is returned</p>
  <h2>Why do I get the following error when attempting to drag an order; and how do I fix it?**</h2>
  <blockquote>
  <p>&quot;Uncaught TypeError: Cannot read property 'setData' of undefined&quot;</p>
  </blockquote>
  <p><em>Please refrain from directing towards using a .js library such as TouchPunch etc.</em></p>
  <p>I'm trying to bind the 'touchmove' event to fire off the drag(event) and provide the same .setData/.getData functionality that is available for the mouse drag triggered event.</p>
  <h2>---&gt;<a href="http://jsfiddle.net/stev0thegreat/8zqc9nzh/" rel="nofollow noreferrer">jsFiddle Link</a> &lt;---</h2>
  <p>HTML:</p>
  <pre><code>&lt;div class=&quot;l-col-container&quot;&gt;
      &lt;section id=&quot;1130&quot; class=&quot;orderqueue&quot;&gt;
           &lt;h1&gt;Order Queue&lt;/h1&gt;
  
          &lt;div class=&quot;orderList&quot;&gt;
              &lt;div id=&quot;100&quot; class=&quot;order&quot; timeslot=&quot;1130&quot; ordernumber=&quot;100&quot; draggable=&quot;true&quot; ondragstart=&quot;drag(event)&quot;&gt;
                  &lt;div class=&quot;order-name&quot;&gt;Johnny Cash&lt;/div&gt;
                  &lt;div class=&quot;order-num&quot;&gt;Order Number: 100&lt;/div&gt;
              &lt;/div&gt;
              &lt;!-- /order --&gt;
              &lt;div id=&quot;101&quot; class=&quot;order&quot; timeslot=&quot;1130&quot; ordernumber=&quot;101&quot; draggable=&quot;true&quot; ondragstart=&quot;drag(event);&quot;&gt;
                  &lt;div class=&quot;order-num&quot;&gt;101&lt;/div&gt;
                  &lt;div class=&quot;order-name&quot;&gt;Johnny Cash&lt;/div&gt;
              &lt;/div&gt;
              &lt;!-- /order --&gt;
          &lt;/div&gt;
          &lt;!-- /orderlist --&gt;
      &lt;/section&gt;
      &lt;div class=&quot;queuebar&quot;&gt;
           &lt;h2&gt;Queue Bar&lt;/h2&gt;
  
          &lt;hr/&gt;
          &lt;div class=&quot;queuebar-dropzone&quot;&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div id=&quot;testsensor&quot;&gt;
           &lt;h2&gt;Test Log&lt;/h2&gt;
  
          &lt;p id=&quot;testsensor-output&quot;&gt;&lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;!-- /l-col-container --&gt;
  </code></pre>
  <p>JavaScript:</p>
  <pre><code>var orders = $('.order');
  var testelement = document.getElementById('testsensor-output');
  var index = 0;
  orders.each(function () {
      $(this).bind('touchmove', function (evt) {
          index++;
          testelement.innerHTML = index + ' dragstart fired';
          console.log('dragstart fired');
          $(this).trigger('dragstart');
      });
      $(this).bind('dragstart', function(event){
          drag(event);
      });
  });
  
  function drag(ev) {
      console.log(ev);
      var obj = $('#' + ev.target.id);
      ev.dataTransfer.setData(&quot;Text&quot;, ev.target.id);
      var data = ev.dataTransfer.getData(&quot;Text&quot;);
  }
  </code></pre>