使用相同 class 在多个 droppable div 上拖动图像

Question

我正在尝试使图像可放置在多个 div 上，我希望只有 1 个 class 用于 "drop zones" 并且只有 1 个用于可拖动元素。

我设法做到了，但我很不高兴，因为我必须把 id 放在 "drop zones" :

<div class="drop" id="id1"</div>

我想在没有 ID 的情况下这样做:

<div class="drop"</div>

因为框是动态生成的 (php)，即使我可以生成随机 ID，我也想避免这种情况。

$(function() {
  var $dragElem = $(".drag"),
    $dropId1 = $("#id1")
  $dropId2 = $("#id2"),
    $dropZone = $(".drop");

  $($dragElem).draggable({
    revert: "invalid",
    helper: "clone",
    cursor: "move"
  });

  $dropId1.droppable({
    accept: $dragElem,
    drop: function(event, ui) {
      console.log(ui.draggable);
      deleteImage(ui.draggable, $(this));
      $(this).droppable("disable");
    }
  });

  $dropId2.droppable({ //same function but with different id
    accept: $dragElem,
    drop: function(event, ui) {
      console.log($(this).attr("id"));
      deleteImage(ui.draggable, $(this));
      $(this).droppable("disable");
    }
  });

  function deleteImage($item, $id) {
    $item.fadeOut(function() {
      $item.appendTo($id).fadeIn();
    });
  }
});

.drop {
  width: 200px;
  height: 100px;
  border: 1px solid black;
}

<head>
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>

<div class="drop" id="id1"></div>
<div class="drop" id="id2"></div>

<div>
  <img class="drag" src="https://thumb.ibb.co/nkO7Cd/Chrysanthemum.jpg" width="96" height="72">
  <img class="drag" src="https://thumb.ibb.co/nkO7Cd/Chrysanthemum.jpg" width="96" height="72">
</div>

Here is a working JSFiddle with id。

我听说过独特的元素节点，但无法使用它们。

感谢您的帮助。

Answer 1

您根本不需要使用 id 属性。可放置元素共享 .drop class，因此您可以直接将其用于所有情况：

$(function() {
  var $dragElem = $(".drag"),
    $dropZone = $(".drop");

  $dragElem.draggable({
    revert: "invalid",
    helper: "clone",
    cursor: "move"
  });

  $dropZone.droppable({
    accept: $dragElem,
    drop: function(event, ui) {
      deleteImage(ui.draggable, this);
      $(this).droppable("disable");
    }
  });

  function deleteImage($item, $id) {
    $item.fadeOut(function() {
      $item.appendTo($id).fadeIn();
    });
  }
});

.drop {
  width: 200px;
  height: 100px;
  border: 1px solid black;
}

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div class="drop"></div>
<div class="drop"></div>

<div>
  <img class="drag" src="https://thumb.ibb.co/nkO7Cd/Chrysanthemum.jpg" width="96" height="72">
  <img class="drag" src="https://thumb.ibb.co/nkO7Cd/Chrysanthemum.jpg" width="96" height="72">
</div>

使用相同 class 在多个 droppable div 上拖动图像

drag image on multiple droppable div with same class

jquery

html

jquery-ui

jquery-ui-draggable

jquery-ui-droppable