javascript - 我怎样才能做多个 jQuery UI 拖放？

Question

提前感谢您抽出宝贵时间查看我的问题。

使用 jQuery 和 jQuery UI，我一直在尝试将绷带、石膏和水坑等元素拖到火柴人的各个元素上。例如，如果绷带掉到他的左臂上，则左臂的背景图像会变为上面有绷带。

有一次，我的代码可以拖放您选择的第一个项目 - 这是一个开始。现在，我丢失了它，它只是执行 jQuery 列表中的最后一个元素，在本例中是将水坑拖到火柴人的元素上。

我已经尝试纠正了几个小时，但无法解决问题!!

如果有人能提供帮助，我们将不胜感激。

$(document).ready(function () {
  //Drag bandage
  $(".draggableBandage").draggable({ containment: ".scenarioSec", cursor: "pointer", helper: "clone" });
  //Drop bandage on right arm 
  $("#droppableRightArm").droppable({
    drop: function (event, ui) {
      $(this).addClass("rpRightArmBandage")
    }
  });
  //Drop bandage on right leg
  $("#droppableRightLeg").droppable({
    drop: function (event, ui) {
      $(this).addClass("rpRightLegBandage")
    }
  });
  //Drop bandage on head
  $("#droppableHead").droppable({
    drop: function (event, ui) {
      $(this).addClass("rpHeadBandage")
    }
  });
  //Drop bandage on left arm
  $("#droppableLeftArm").droppable({
    drop: function (event, ui) {
      $(this).addClass("rpLeftArmBandage")
    }
  });
  //Drop bandage on left leg
  $("#droppableLeftLeg").droppable({
    drop: function (event, ui) {
      $(this).addClass("rpLeftLegBandage")
    }
  });
});
$(document).ready(function () {
  //Drag plaster 
  $(".draggablePlaster").draggable({ containment: ".scenarioSec", cursor: "pointer", helper: "clone" });
  //Drop plaster on right arm
  $("#droppableRightArm").droppable({
    drop: function (event, ui) {
      $(this).addClass("rpRightArmPlaster")
    }
  });
  //Drop plaster on right leg
  $("#droppableRightLeg").droppable({
    drop: function (event, ui) {
      $(this).addClass("rpRightLegPlaster")
    }
  });
  //Drop plaster on head
  $("#droppableHead").droppable({
    drop: function (event, ui) {
      $(this).addClass("rpHeadPlaster")
    }
  });
  //Drop plaster on left arm
  $("#droppableLeftArm").droppable({
    drop: function (event, ui) {
      $(this).addClass("rpLeftArmPlaster")
    }
  });
  //Drop plaster on left leg
  $("#droppableLeftLeg").droppable({
    drop: function (event, ui) {
      $(this).addClass("rpLeftLegPlaster")
    }
  });
});
$(document).ready(function () {
  //Drag water
  $(".draggableWater").draggable({ containment: ".scenarioSec", cursor: "pointer", helper: "clone" });
  //Drop water on right arm
  $("#droppableRightArm").droppable({
    drop: function (event, ui) {
      $(this).addClass("rpRightArmWater")
    }
  });
  //Drop water on right leg
  $("#droppableRightLeg").droppable({
    drop: function (event, ui) {
      $(this).addClass("rpRightLegWater")
    }
  });
  //Drop water on head
  $("#droppableHead").droppable({
    drop: function (event, ui) {
      $(this).addClass("rpHeadWater")
    }
  });
  //Drop water on left arm
  $("#droppableLeftArm").droppable({
    drop: function (event, ui) {
      $(this).addClass("rpLeftArmWater")
    }
  });
  //Drop water on left leg
  $("#droppableLeftLeg").droppable({
    drop: function (event, ui) {
      $(this).addClass("rpLeftLegWater")
    }
  });
});

Answer 1

好的，所以每次您附加一个新的 droppable 事件处理程序时，它都会覆盖您之前拥有的事件处理程序，因此最后一个是唯一有效的。

所以我的建议是您处理被丢弃的对象类型，并且每个肢体有一个事件处理程序。

我找出哪些项目被丢弃的方法是在标记中使用 data- 属性，然后在 dropped 事件中将它们拉出。

这意味着您可以编写非常通用的代码，通过将对象类型附加到类名来动态应用适当的 css 样式。

<div class="draggableObject bandage" data-object="Bandage"></div>
<div class="draggableObject plaster" data-object="Plaster"></div>

这是 javascript 示例:Here is a link to a quick demo in JSFiddle

$(document).ready(function() {
    $('.draggableObject').draggable();

    $('.droppableRightArm').droppable({
        drop: function(event, ui) {
            var $this = $(this); // reuse JQuery object.
            var droppedObject = ui.draggable.data('object'); // get object type
            // css reset
            $this.removeClass();
            $this.addClass("rpRightArm" + droppedObject);
            //
        }
    });
});​