jQuery UI的 - 可拖動後不正確的工作回落

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" 
     }); 

} 
}); 
});​ 

活生生的例子：http://jsfiddle.net/CVbzg/3/

正如你可以在的jsfiddle例子中看到，當圖像當它移出拖放區域時，它會完全鎖定，但會丟失可拖動性，而不是恢復原來的父級。

有人可以幫忙嗎？

Answer 1

當您移動可放開一點點後，它已經被放置在放置目標和它失去draggability，那是因爲

$this.html(""); 

在降處理器，可拖動仍然是下降的目標內。當你刪除放置目標的HTML時，你也刪除了應該被重新添加的元素。這會返回一個語法錯誤，因爲該元素不再存在，這會中斷操作，從而將克隆留在那裏並拖動可擦除。

這裏有一個快速的解決辦法：

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

它不會允許被其他元素，其中包括對自己的放置目標重新下探元素覆蓋放置目標內部的下降元素。

---

另一種解決方案是將已經降到可拖動回到其起始位置追加拖動存在之前被丟棄：

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

Fiddle

你一定要照顧到無法抹去一個可拖動的無意中。 =]