title: DataTransfer object not set in dragStart event
body: <p>I am trying to implement drag-n-drop to change dates in an article scheduling system.  I want the user to be able to drag an article entry from one date to another, and the schedules should then automatically be updated.  Here is my code:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      $(function () {
          $(".scheduledArticleRow").draggable({
              cursor: "move",
              cursorAt: { top: -12, left: -20 },
              opacity: 0.5,
              helper: function (event) {
                  return $("&lt;div class='ui-widget-header'&gt;" + $(this).data('title') + "&lt;/div&gt;")
              }
          });
          $(".articleNeededRow").droppable();
          $(".reservedDateRow").droppable();
  
          $(".scheduledArticleRow").off("dragstart").on("dragstart", function (e) {
              console.log("dragstart");
              e.dataTransfer.setData("articleId", $(this).data("articleId"));    // Uncaught TypeError: Cannot call method 'setData' of undefined 
              e.dataTransfer.setData("oldDate", $(this).data("date"));        // Uncaught TypeError: Cannot call method 'setData' of undefined
              e.originalEvent.dataTransfer.setData("articleId", $(this).data("articleId"));    // Uncaught TypeError: Cannot call method 'setData' of undefined 
              e.originalEvent.dataTransfer.setData("oldDate", $(this).data("date"));            // Uncaught TypeError: Cannot call method 'setData' of undefined
          });
          $(".articleNeededRow").off("drop").on('drop', function (e) {
              console.log("drop");
              e.preventDefault();
              e.stopPropagation();
              changeScheduledDate(e);
          });
          $(".reservedDateRow").off("drop").on('drop', function (e) {
              console.log("drop");
              e.preventDefault();
              e.stopPropagation();
              changeScheduledDate(e);
          });
      });
  
      function changeScheduledDate(e) {
          debugger;
          var articleId = e.dataTransfer.getData("articleId");    // Uncaught TypeError: Cannot call method 'setData' of undefined 
          var oldDate = e.dataTransfer.getData("oldDate");        // Uncaught TypeError: Cannot call method 'setData' of undefined
          articleId = e.originalEvent.dataTransfer.getData("articleId", $(this).data("articleId"));    // Uncaught TypeError: Cannot call method 'setData' of undefined 
          oldDate = e.originalEvent.dataTransfer.getData("oldDate", $(this).data("date"));            // Uncaught TypeError: Cannot call method 'setData' of undefined
  
          var newDate = $(this).parents(".tr").data("date");
  
          // Do date-change stuff
      }
  
  
  &lt;/script&gt;
  
  &lt;div class="table tidytable" width="90%"&gt;
      &lt;div class="thead"&gt;
          &lt;div class="cell"&gt;Date&lt;/div&gt;
          &lt;div class="cell"&gt;Article title&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="tbody" id="scheduleBody"&gt;
          &lt;div class="tr articleNeededRow" data-date="2014-02-11"&gt;
              &lt;div class="cell"&gt;&lt;strong&gt;Tue, 11th Feb&lt;/strong&gt;&lt;/div&gt;
              &lt;div class="cell articleNeeded"&gt;Article needed.&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="tr articleNeededRow" data-date="2014-02-12"&gt;
              &lt;div class="cell"&gt;&lt;strong&gt;Wed, 12th Feb&lt;/strong&gt;&lt;/div&gt;
              &lt;div class="cell articleNeeded"&gt;Article needed.&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="tr reservedDateRow" data-date="2014-02-13"&gt;
              &lt;div class="cell"&gt;&lt;strong&gt;Thu, 13th Feb&lt;/strong&gt;&lt;/div&gt;
              &lt;div class="cell articleNeeded"&gt;&lt;strong&gt;Reserved for an upcoming article.&lt;/strong&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="tr scheduledArticleRow" data-date="2014-02-14" data-articleid="8789" data-title="This is the title"
              draggable="true"&gt;
              &lt;div class="cell"&gt;&lt;strong&gt;Fri, 14th Feb&lt;/strong&gt;&lt;/div&gt;
              &lt;div class="cell"&gt;
                  &lt;h3&gt;This is the title&lt;/h3&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I am using a .css table.  The user should be able to drag from anywhere in the "This is the title" row to any of the other rows.  But in the dragStart event handler, e.dataTransfer is set to null and it is impossible to pass any data across to the drop event.  I don't want to resort to a cookie, HTML5 Local Storage or a global variable - this thing should just work. I have it drag-n-drop using dataTransfer working nicely in other parts of the application.  Some posts recommend that I need to use e.originalEvent.dataTransfer, but that is also null. I am using Google Chrome BTW.  I have created a jsFiddle - <a href="http://jsfiddle.net/btA97/" rel="nofollow">http://jsfiddle.net/btA97/</a> - any help greatly appreciated.</p>