I have elements that are draggable in a list and a droppable area. In that droppable area I have a droppable trashbin that removes the element when dropped on it. This all worked fine until I added resizable to the dropped elements. Now I can’t seem to drop the objects on the trashbin anymore. The resizable is the fault. Here’s my code:
var dropped = false;
function initDraggableElements()
{
jQuery(".draggable_class").draggable({
addClasses: false,
opacity: 0.8,
revert: 'invalid',
containment: '#containment_id_wrapper',
helper: 'clone',
appendTo: '#helper',
start: function(event, ui) {
dropped = false;
jQuery(this).addClass("hide");
},
stop: function(event, ui) {
if (dropped==true) {
jQuery(this).remove();
jQuery("#" + this.id).resizable({
containment: '#containment_id'
}).parent('.ui-wrapper').draggable({
containment: '#containment_id',
opacity: 0.8
});
} else {
jQuery(this).removeClass("hide");
}
}
});
}
function initDroppableTrashbin()
{
jQuery("#trashbin").droppable({
accept: '.draggable_class',
hoverClass: 'trashbin_hover',
tolerance: 'touch',
drop: function(event, ui) {
ui.draggable.remove();
var id = ui.draggable.attr('id');
jQuery("#" + id).remove();
}
});
}
function initDroppableArea()
{
jQuery("#droppable_area").droppable({
accept: '.draggable_class',
hoverClass: 'area_hover',
activeClass: 'area_active',
drop: function(event, ui) {
dropped = true;
jQuery.ui.ddmanager.current.cancelHelperRemoval = true;
ui.helper.appendTo(this);
}
});
}
One solution would be to not use the droppable properties of the trashbin but instead calculate on the width, height, and position of the element when dragged and dropped to see if it’s dropped on the trashbin. But I would rather use the droppable’s code for that. Any hints?