3

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

使用 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")
    }
  });
});
4

1 回答 1

1

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

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

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

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

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

这是 javascript 示例：这是 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);
            //
        }
    });
});​
于 2012-11-15T00:23:15.933 回答