Jquery Draggable and Droppable with Multiple Draggable答案

【问题标题】：Jquery Draggable and Droppable with Multiple DraggableJquery Draggable and Droppable with Multiple Draggable
【发布时间】：2015-05-14 16:16:20
【问题描述】：

对 jquery 来说有点新，我正在使用可拖动和可放置的东西。我有两个可拖动的和一个可放置的。我不太清楚如何根据我丢弃的盒子做不同的事情。这是我的jQuery：

        $(function() {
            $( "#greatplan" ).draggable();
            $( "#droppable" ).droppable({
              drop: function( event, ui ) {
                $( this )
                  .addClass( "ui-state-highlight" )
                  .find( "p" )
                  .html( "Great Plan Picked!" )
              }
            });
             $( "#poorplan" ).draggable();
             $( "#droppable" ).droppable({
              drop: function( event, ui ) {
                $( this )
                  .addClass( "ui-state-highlight" )
                  .find( "p" )
                  .html( "Poor Plan Picked!" )

                }
          });

})

还有我的 HTML：

         <div id="greatplan" class="ui-widget-content">
          <p>Great Plan!</p>
        </div>
        <br>
        <div id="poorplan" class="ui-widget-content">
          <p>Poor Plan!</p>
        </div>

        <div id="droppable" class="ui-widget-header">
          <p>Drop your plan here</p>
        </div>

无论我将哪个框拖到 droppable 中，我总是得到“糟糕的计划！”。有什么想法吗？

【问题讨论】：

标签： javascript jquery jquery-ui jquery-ui-draggable jquery-ui-droppable

【解决方案1】：

您需要一个拖放处理程序，并测试哪个可拖动元素被拖放。

$(function() {
    $("#greatplan").draggable();
    $("#poorplan").draggable();

    $("#droppable").droppable({
        drop: function (event, ui) {
            switch (ui.draggable.attr('id')) {
                case "greatplan":
                    $(this).addClass("ui-state-highlight").find("p").html("Great Plan Picked!");
                    break;
                case "poorplan":
                    $(this).addClass("ui-state-highlight").find("p").html("Poor Plan Picked!")
                    break;
            }
        }
    });
});

DEMO

【讨论】：

【解决方案2】：

在您的代码中，您正在覆盖处理放置事件的代码。它总是会返回糟糕的计划，因为这是它的最新定义。您必须区分被拖放到 .droppable 函数中的对象的 ID。

如何获取被删除元素的ID：

Get dropped elements id instead of drop target id

【讨论】：

但是 OP 使用的是 jQuery 可拖动/可拖放，而不是原生 HTML5！有很大的不同。
你完全正确，我完全搞砸了如何获得可拖动的 id。

【解决方案3】：

使用if else 语句会很容易，因为您只需删除两个元素！如果#greatplan 被删除，请说“选择了很好的计划”，否则说“选择了糟糕的计划”。希望对您有所帮助。

【讨论】：