jQueryUI draggable + sortable bug (Cannot read property 'options' of undefined)
javascript, jquery, jquery-ui, jquery-ui-draggable, jquery-ui-sortable
Solution
According to the documentation, Jquery UI Draggable Documentation, you need to set the helper parameter to "clone", for the connectWithSortable functionality to work flawlessly.
Once I did that, it stopped throwing the error.
Updated JSBin
Also a note, draggable doesn't have a 'drop' method in its documentation, so you'll probably have to include the droppable plugin if thats what youre going for.
Lastly, if you have to use clone as the helper method, you'll probably need to add some css to make it run smoother.
Cheers.
Problem
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.