Deleting an element after jsPlumb.draggable() in a droppable's drop: function

Question

I want to make a delete area, where any element which is dropped gets deleted. Hence I implemented this as a droppable with drop:function(event,ui){ui.helper.remove()}. This doesn't work with jsPlumb.draggable().

The JSFiddle

This works fine when I make the elements draggable with Jquery UI $(...).draggable(). Hence it appears that jsPlumb.draggable($(...),{}) doesn't use a helper. Calling ui.draggable.remove() deletes many more elements.

I think there's nothing in jsPlumb documentation or StackOverflow about this specific issue.

Any ideas? Now the best solution would be without an elseif ladder to check for various implementations from various plugins, if possible.

Answer 1

As you have mentioned that with jQuery draggable everything works fine then I would suggest you to replace the jsPlumb draggable as:

droppedEleClone.draggable({
                snap: '.dragme',
                drag:function(e){
                    jsPlumb.repaint($(this));
                }
            });

And also while cloning make sure that you provide different ID's. DOM elements having same ID's doesn't yield proper result. Because of cloning the same object it's difficult to identify the right one and deleting it. Hence provide different ID's.