拖放 - 识别并更改要拖放的项目？答案

【问题标题】：Drag/Drop - Identify and change which item is being dropped?拖放 - 识别并更改要拖放的项目？
【发布时间】：2015-07-20 11:42:58
【问题描述】：

我想将三个项目拖到一个放置点。每个项目将在放置时隐藏，并显示/附加不同的隐藏 div 到放置父级。

我可以降低拖动机制，但让 drop 根据放入其中的内容来接受/触发不同的事件是我遇到问题的地方。

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

【问题讨论】：

标签： javascript jquery jquery-ui drag-and-drop

【解决方案1】：

定义一个放置函数并在其中实现该逻辑：

$( ".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

【讨论】：

正确。我理解那部分。但是我如何让它为每个掉落的物品触发不同的事件？在上面的示例中，假设事件是将背景颜色更改为红色。但它会用所有 3 个可丢弃的项目来做到这一点。我如何让它为每个人做不同的事情？
谢谢。我理解那部分。但你的例子正是我卡住的地方。我需要说，将第 2 项的背景更改为蓝色，将第 3 项更改为绿色。现在，所有 3 项都将其更改为红色。
如果我不清楚，我深表歉意。它不是我要更改颜色的 Draggable 项目，它是放置元素本身。在这种情况下，具有“.first-row”类的 div。因此，如果我将“drag-item-1”拖到 div“第一行”，它应该变为红色。然后用“drag-item-2”重复，这应该把它变成蓝色，等等。
我想我明白了。我只是将 ui.draggable.css 更改为 $(".first-row")
使用 $(this) 是更好的选择，因此您可以在多个 droppables 上使用它：jsfiddle.net/hcnhwvov/2