My question seems to resemble this question:

dragging from a sortable list to a drag and drop plugin

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:

$(el).sortable({ ... arguments ... }); 

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.

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

And this is the code where it goes wrong:

$.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);

        }

    }

});

var o = $(this).data(ui-draggable).options;
The $(this).data() only contains: Object {id: c17}

Example code:

$('.draggable').draggable({

  connectToSortable: '.sortable',

  drop: function(){

    console.log('Element dropped');

  }

});



$('.sortable').sortable({

  update: function(){

     console.log('sortable updated'); 

  }

});

JSBin example: http://jsbin.com/eHUKuCoL/9/edit?html,js,output
Hopefully somebody is able to tell me what the issue is and what the fix for the issue is.