Hello all,
I'm working on an interface for dragging and sorting questions and their choices. I have a toolbar on the right with the available questions/choices and the list of current questions/choices on the left. The list on the left is a droppable and a sortable. The items in the list on the right are all draggable and connected to the appropriate lists on the left.
Thus, when I drop a toolbar choice (draggable) into the list of choices on the left (droppable & sortable), it is actually firing two drop events. Apparently this is a common problem, and most people just wind up removing the droppable functionality and using the stop method of sortable.
However, I need the accept functionality of the droppable since the user could be dragging a question or a choice, and they can only drop questions into the questions list and choices into a choices list.
I have noticed that using the option revert:true on the draggable alleviates the problem, but does funny things with the UI. If the AJAX request takes a second, you see the thing you were dragging pop back to the side with no placeholder, and then the choice appears at the correct spot.
So, is there a good way to stop one of the drop events from firing? Or should I just increment a counter variable and only execute the AJAX if the variable is perfectly divisible by 2?
Thanks very much!