2015-07-20 92 views
0

我想將三個項目拖放到一個放置點。每個項目都將隱藏在拖放中,並向拖放父項顯示/附加不同的隱藏div。拖放 - 識別並更改要刪除的項目?

我可以得到拖動機制,但讓滴下來接受/觸發不同的事件基於什麼被放入它是我有一個問題。

$(function(){ 
    $(".drag-item-1").draggable(); 
    $(".drag-item-2").draggable(); 
    $(".drag-item-3").draggable(); 
    $(".first-row").droppable(); 
}); 

回答

0

在那裏定義下降功能和實施的邏輯:

$(".first-row").droppable({ 
    drop: function(event, ui) { 
    if (ui.draggable.hasClass("drag-item-1")){ 
     $(this).css("background-color","red"); 
    } else if (ui.draggable.hasClass("drag-item-2")){ 
     $(this).css("background-color","blue"); 
    } else { 
     $(this).css("background-color","green"); 
    } 
    } 
}); 

http://api.jqueryui.com/droppable/#event-drop

+0

權。我明白那一部分。但是,如何讓它爲每件物品掉落都引發不同的事件?在上面的例子中,假設事件是將背景顏色改爲紅色。但是它將用所有3種可丟棄的物品來做到這一點。我如何讓它爲每個人做不同的事情? –

+0

我做了一個例子jsfiddle:http://jsfiddle.net/hcnhwvov/ – FuRioN

+0

謝謝。我明白那一部分。但你的榜樣恰恰是我卡住的地方。我需要說,將項目2的背景更改爲藍色,將項目3更改爲綠色。現在,所有3個都將其更改爲紅色。 –