Reputation: 57
I have a draggable item with a class of '.item', once i drag it to its destination it just sits there and i can't move it around, this is the code i'm using :
$('.item').draggable({
helper : 'clone',
onStartDrag:function(){
$(this).draggable('options').cursor = 'not-allowed';
$(this).draggable('clone').css('z-index',10);
},
onStopDrag:function(){
$(this).draggable('options').cursor='move';
}
});
$('.cart').droppable({
drop: function(event, ui) {
$.ui.ddmanager.current.cancelHelperRemoval = true;
},
onDragEnter:function(e,source){
$(source).draggable('options').cursor='auto';
},
onDragLeave:function(e,source){
$(source).draggable('options').cursor='not-allowed';
$.ui.ddmanager.current.cancelHelperRemoval = false;
},
onDrop:function(e,source){
var name = $(source).find('p:eq(0)').html();
var price = $(source).find('p:eq(1)').html();
addProduct(name, parseFloat(price.split('$')[1]));
}
});
Upvotes: 0
Views: 311
Reputation: 623
Revised Drop function in Dropppable method
$(".item").draggable({
helper:'clone',
onStartDrag:function(){
$(this).draggable('options').cursor = 'not-allowed';
$(this).draggable('clone').css('z-index',10);
},
onStopDrag:function(){
$(this).draggable('options').cursor='move';
}
});
$(".cart").droppable({
accept: ".item",
drop: function(event,ui){
var new_signature = $(ui.helper).clone().removeClass('item');
new_signature.draggable();
$(this).append(new_signature);
},
onDragEnter:function(e,source){
$(source).draggable('options').cursor='auto';
},
onDragLeave:function(e,source){
$(source).draggable('options').cursor='not-allowed';
$.ui.ddmanager.current.cancelHelperRemoval = false;
},
onDrop:function(e,source){
var name = $(source).find('p:eq(0)').html();
var price = $(source).find('p:eq(1)').html();
addProduct(name, parseFloat(price.split('$')[1]));
}
});
Upvotes: 2