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.
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.
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.