title: jQueryUI draggable + sortable bug (Cannot read property 'options' of undefined)
body: <p>My question seems to resemble this question:</p>
  
  <p><a href="https://stackoverflow.com/questions/17928139/dragging-from-a-sortable-list-to-a-drag-and-drop-plugin">dragging from a sortable list to a drag and drop plugin</a></p>
  
  <p>But since there is no answer given to that one i was wondering if anybody could / would be able to figure it out with me. The issue i am having is that i create a draggable div and append this into a div that is made sortable. When i specify any arguments like so:</p>
  
  <pre><code>$(el).sortable({ ... arguments ... }); 
  </code></pre>
  
  <p>It causes an error when element is dropped see below, when left empty it strangely works fine and has no issues. The error also prevents any functions to be triggered by the draggable element.</p>
  
  <pre><code>Uncaught TypeError: Cannot read property 'options' of undefined 
  jquery-ui-1.10.3.custom.js:2204
  
  $.ui.plugin.add.stop                         jquery-ui-1.10.3.custom.js:2204
  $.extend.plugin.call                         jquery-ui-1.10.3.custom.js:284
  $.widget._trigger                            jquery-ui-1.10.3.custom.js:2017
  (anonymous function)                         jquery-ui-1.10.3.custom.js:401
  $.widget._mouseStop                          jquery-ui-1.10.3.custom.js:1702
  (anonymous function)                         jquery-ui-1.10.3.custom.js:401
  $.widget._mouseUp                            jquery-ui-1.10.3.custom.js:957
  (anonymous function)                         jquery-ui-1.10.3.custom.js:401
  $.widget._mouseUp                            jquery-ui-1.10.3.custom.js:1721
  (anonymous function)                         jquery-ui-1.10.3.custom.js:401
  $.widget._mouseDown._mouseUpDelegate         jquery-ui-1.10.3.custom.js:913
  jQuery.event.dispatch                        jquery-1.10.2.js:5095
  jQuery.event.add.elemData.handle             jquery-1.10.2.js:4766
  </code></pre>
  
  <p>And this is the code where it goes wrong:</p>
  
  <pre><code>$.ui.plugin.add("draggable", "cursor", {
      start: function() {
          var t = $("body"), o = $(this).data("ui-draggable").options;
          if (t.css("cursor")) {
              o._cursor = t.css("cursor");
          }
          t.css("cursor", o.cursor);
      },
      stop: function() {
          var o = $(this).data("ui-draggable").options;
          if (o._cursor) {
              $("body").css("cursor", o._cursor);
          }
      }
  });
  </code></pre>
  
  <p><code>var o = $(this).data("ui-draggable").options;</code>
  The <code>$(this).data()</code> only contains: Object {id: "c17"}</p>
  
  <p>Example code:</p>
  
  <pre><code>$('.draggable').draggable({
    connectToSortable: '.sortable',
    drop: function(){
      console.log('Element dropped');
    }
  });
  
  $('.sortable').sortable({
    update: function(){
       console.log('sortable updated'); 
    }
  });
  </code></pre>
  
  <p>JSBin example: <a href="http://jsbin.com/eHUKuCoL/9/edit?html,js,output" rel="nofollow noreferrer">http://jsbin.com/eHUKuCoL/9/edit?html,js,output</a>
  Hopefully somebody is able to tell me what the issue is and what the fix for the issue is. </p>