在具有相同类的多个可放置 div 上拖动图像答案

【问题标题】：drag image on multiple droppable div with same class在具有相同类的多个可放置 div 上拖动图像
【发布时间】：2018-11-09 07:43:38
【问题描述】：

我正在尝试使图像可拖放到多个 div 上，我希望“拖放区”只有 1 个类，可拖动元素只有 1 个。

我设法做到了，但我很不高兴，因为我必须将 id 放在“放置区”中：

<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。

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

感谢您的帮助。

【问题讨论】：

标签： jquery html jquery-ui jquery-ui-draggable jquery-ui-droppable

【解决方案1】：

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

$(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>

【讨论】：

哎呀，我应该考虑到这一点。我的错，谢谢！