Question

HTML:

<div class="character_list">
   <div id="draggable" class="character_list_container">
      <div><img  class="1" src="http://ahna.web44.net//img/charas/13.png" /></div>
      <div><img class="2" src="http://ahna.web44.net//img/charas/13.png" /></div>
      <div><img class="3" src="http://ahna.web44.net//img/charas/13.png" /></div>
      <div><img  class="4" src="http://ahna.web44.net//img/charas/13.png" /></div>
      <div><img class="5" src="http://ahna.web44.net//img/charas/13.png" /></div>
      <div><img class="6" src="http://ahna.web44.net//img/charas/13.png" /></div>
   </div>
   <div id="droppable_slots" class="current_team">
      <div id="slot" class="1">1</div>
      <div id="slot" class="2">2</div>
      <div id="slot" class="3">3</div>
   </div>
</div>​

jQuery:

$(function() {
    $("#draggable>div>img").draggable({
        start: function(){
           $(this).css({display: 'none'});
        },
        stop: function(){
           $(this).css({display: 'block'});
        },
        revert: function(dropped) {
           var dropped = dropped && dropped[0].id== "slot";
           if(!dropped) {
              $(this).appendTo($(this).data('originalParent'))
            }
            return !dropped;
        },
        helper: function() { return $(this).clone().appendTo('body').show(); },
        containment: '.sel_screen_left'
}).each(function() {
    $(this).data('originalParent', $(this).parent())
});

$("#droppable_slots>div").droppable({
    drop: function(event, ui) {

        var $this = $(this);
    var content = $.trim($this.html()).length;
    if(content > 0) {
    $this.html("");
    }
        $this.append(ui.draggable);    

        var width = $this.width();
        var height = $this.height();
        var cntrLeft = (width / 2) - (ui.draggable.width() / 2);
        var cntrTop = (height / 2) - (ui.draggable.height() / 2);

        ui.draggable.css({
            left: cntrLeft + "px",
            top: cntrTop + "px"
        });

}
});
});​

Live example: http://jsfiddle.net/CVbzg/3/

As you can see in the jsfiddle example, when an image is dropped it locks in perfectly however when you move out of the drop zone it loses the draggability rather than reverting and appending to its original parent.

Can someone help?

Answer 1

When you move the droppable a little bit after it is already placed in the drop target and it loses draggability, it is because of

$this.html("");

In the drop handler, the draggable is still inside the drop target. When you erase the drop target’s HTML, you also remove the element which is supposed to be re-appended. This returns a syntax error as the element is no longer there which breaks the operation leaving the clone there and the draggable erased.

Here’s a quick fix:

drop: function(event, ui) {

    var $this = $(this);
    if ($this.find('.ui-draggable').length) return; //don't overwrite occupied spot
    $this.empty(); //empty() sounds more semantic than html('') for me, it does the same thing =]
    $this.append(ui.draggable);
    //...
}

Fiddle

It won’t allow overwriting a dropped element inside of a drop target by another element, which includes re-dropping elements on their own drop targets.

---

An alternative solution is to move the already dropped draggable back to its starting position before appending the draggable being dropped:

drop: function(event, ui) {
    var $this = $(this),
        containsDropped = $this.find('.ui-draggable');
    if (containsDropped.length) containsDropped.appendTo(containsDropped.data('originalParent'));
    $this.empty();

Fiddle

You just have to take care to not erase a draggable unintentionally. =]