jquery - 具有不同放置动作的多个可拖动对象

Question

是否可以有多个可拖动和一个可放置，但具有不同的可放置功能？请看一下我的代码和我的示例。我正在尝试实现这一点，当您删除第二个 div 时，它会显示“您删除了另一个”。我计划制作更多可拖动的 div，但对于示例，我只使用了两个可拖动的和一个可放置的。

提琴手

JS

$("#draggable_one").draggable({

    revert: true
});


$("#draggable_two").draggable({

   revert: true
});

$("#theonlydroppable").droppable({
    drop: function(event, ui) {
  $(this).html("you dropped one");

    }
});

HTML

         <div id="draggable_one">
          draggable one
         </div>
         <div id="draggable_two">
            draggable two
         </div>

         <div id="theonlydroppable">
            Drop it like it's hot
         </div>

Answer 1

只需添加一个条件来检查哪个可拖动对象被丢弃，然后采取适当的措施：

$("#theonlydroppable").droppable({
    drop: function(event, ui) {
        if (ui.draggable.is('#draggable_one')) {
            $(this).html("you dropped one");
        } else {
            $(this).html("you dropped the other one");
        }
    }
});

这是一个演示：http: //jsfiddle.net/yMDB3/1/