複製Jquery Draggables

Question

我試圖創建一個draggalbe項目，可以複製並拖到droppable。好了，經過一番努力，去工作，並使得到的副本可拖動。但是「drop」方法使得如果我不止一次拖動新克隆，它會繼續克隆自身。我明白爲什麼它會這樣做，但我不太確定如何關閉它。只有可丟棄框外的項目應該是可複製的。一旦進入盒子，副本應該也能夠移動，但不能克隆自己。

Example

嘗試在拖動小刺蝟的盒子（到目前爲止，一切都很好。），然後將其放到箱子裏面幾次看到這個問題。

$(function() { 
    $("#draggable1").draggable({ helper: 'clone', revert: "invalid" }); 
    $("#panel1").droppable({ 
     drop: function(event, ui) { 
      $(this).append($(ui.helper).clone().draggable()); 
     } 
    }); 
}); 

Answer 1

您需要爲可放開一種方法來檢測外刺蝟之間的差異被丟棄，並且已經下降刺蝟的一個被丟棄。這樣，您可以確保drop回調僅克隆從盒子外面丟棄的刺蝟。

方便的是，您已經有一種方法可以檢測到：外部的<img>有一個ID，而框中的<img>元素沒有。因此，您需要做的就是找出如何訪問drop回調函數內部的被丟棄元素的「來源」。

按照該droppable docs，ui.draggable是「當前拖動元素，jQuery對象，」這樣你就可以得到該元素的id在任意數量的途徑。下面是工作的一種方式：

$("#draggable1").draggable({ 
    helper: 'clone', 
    revert: "invalid" 
}); 

$("#panel1").droppable({ 
    drop: function(event, ui) { 
     if (ui.draggable[0].id) { 
      $(this).append($(ui.helper).clone().draggable()); 
     } 
    } 
}); 

演示：http://jsfiddle.net/mattball/MJhcp/

---

由於ui.draggable是一個完全成熟的jQuery對象，它也將努力使用下面的任何，代替ui.draggable[0].id：

• ui.draggable.get(0).id
• ui.draggable.attr('id')
• ui.draggable.prop('id')