Question

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>

无论我拖入哪个盒子，我都会得到“糟糕的计划！”。有什么想法吗？

Answer 1

你需要一个 drop处理程序，其中包含一个可拖动可拖动元素的测试。

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

Answer 2

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

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

Get dropped elements id instead of drop target id

Answer 3

使用if else语句会很容易，因为您只有两个要删除的元素！如果#greatplan被删除，请说＆＃34;选择好的计划＆＃34;，否则说＆＃34;选择差的计划＆＃34;。希望有所帮助。

具有多个可拖动的Jquery Draggable和Droppable

3 个答案: