Question

我试图让图片可以放在多个div上，我只想在＃34; drop zone＆＃34;并且只有1个可拖动元素。

我设法做到了，但我不高兴，因为我必须将id放入＆＃34; drop zone＆＃34; ：

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

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

<div class="drop"</div>

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

＆＃13;

$(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();
    });
  }
});

＆＃13;

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

＆＃13;

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

＆＃13;

Here is a working JSFiddle with id。

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

感谢您的帮助。

Answer 1

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

＆＃13;

$(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();
    });
  }
});

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: