0

Here is my JS Fiddle.

In the JS Fiddle there are 3 Droppables within a div called 'droppables' and 3 Draggables within a div called 'draggables'. You can drag any of the draggables onto any of the droppables and it will update the corresponding div with the data. 

    $(this).text('');
    $('#div1_value').text(ui.draggable.data('object'));
    $(ui.draggable).appendTo(this);

You are also allowed to 'overwrite' by dragging a draggable onto a droppable with a draggable already there. This will append the old draggable back to the list of draggables.

if(counter != 1)
        {
            $(this).find('.ui-draggable').appendTo($('#draggables'));
            counter = 1;
        }

Here is the trouble though. If you were to drag a draggable from one droppable to another you will notice that the value of the div which is now technically null and void will still display the value of the old draggable.

TaylorM
  • 109
  • 1
  • 11

1 Answers1

1

Ok, second try.

You should use the start and stop function of the draggable: http://api.jqueryui.com/draggable/#event-start

When the start event happens, ui.helper is the new temporary object being dragged while ui.helper.prevObject is the previous object, still in its position.

When the stop event happens, ui.helper is still the temporary object being dragged and ui.helper.prevObject is the new object about to land (I know, it's a little confusing since it's called prevObject, but that is how it seems to work).

Note that the prevObjects are in the "right" position in both cases, so you can use them to find the correct droppable container and update the counters, the text and any other "cleanup" operation that you might still need to do.

I suggest that in the start event you prepare some global variables with all the you will need to do the cleanup if the draggable is dropped in a different droppable, but that you delay the actual cleanup to the stop event (checking beforehand if it's actually needed).

You should use the out event in the droppable: http://api.jqueryui.com/droppable/#event-out to intercept when one of your draggable leaves the droppable.

I'll have some code for you in a minute.

A. Rama
  • 903
  • 8
  • 18