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に、以前のイベント ハンドラーが上書きされるため、最後のイベント ハンドラーだけが機能します。

したがって、ドロップされるオブジェクトのタイプを処理し、リムごとに 1 つのイベント ハンドラーを用意することをお勧めします。

ドロップされたアイテムを見つける方法は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 に答える