Question

提前感谢您花时间查看我的问题。

使用jQuery＆amp; 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-属性，然后在删除的事件中将它们拉出来。

这意味着您可以编写非常通用的代码，通过将对象类型附加到类名来动态应用适当的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);
            //
        }
    });
});

如何进行多个jQuery UI拖放操作？

1 个答案: