在具有相同类的多个可放置 div 上拖动图像
Posted
技术标签:
【中文标题】在具有相同类的多个可放置 div 上拖动图像【英文标题】：drag image on multiple droppable div with same class 【发布时间】：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" >
<img class="drag" src="https://thumb.ibb.co/nkO7Cd/Chrysanthemum.jpg" >
</div>Here is a working JSFiddle with id。
我听说过独特的元素节点，但无法使用它们。
感谢您的帮助。
【问题讨论】：
【参考方案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" >
<img class="drag" src="https://thumb.ibb.co/nkO7Cd/Chrysanthemum.jpg" >
</div>【讨论】：
哎呀，我应该考虑到这一点。我的错，谢谢！以上是关于在具有相同类的多个可放置 div 上拖动图像的主要内容，如果未能解决你的问题，请参考以下文章
具有不可拖动子图像的可拖动 div 上的 FireFox 问题