基本上我拥有的是一组doodads，我需要做的是能够将该组中的任何项目拖到一个收容箱中。一旦进入盒子，它们仍然可以自由移动和操作，但不能再次从盒子中取出，尽管它们可以被删除。
装饰物也被设置为克隆，因为用户可以根据需要在盒子中拥有多个元素。
所以两部分就是，设置doodad列表(已经完成)，然后让它可以拖拽，这样就可以拖拽到droppable div框中。然后第二部分是，一旦它在div框中，它必须再次可拖动，不可复制，并且还包含在框中。
这是我的 JS 代码:
$(document).ready(function() {
function MakeDraggable(item) {
item.draggable({
revert : "invalid"
});
}
$(".doodad").draggable({
helper : 'clone',
scroll : true
});
$(".dropped").draggable ({
containment: ".box"
});
$(".box").droppable({
accept : ".doodad",
activeClass : "ui-state-default",
hoverClass : "ui-state-hover",
drop : function(event, ui) {
var droppedItem = $(ui.draggable).clone();
//droppedItem.class = ".dropped";
droppedItem.draggable();
//ui.draggable.draggable('option', 'revert', false);
//droppedItem.draggable();
$(this).append(droppedItem);
}
});
});
我已经尝试了很多东西。我尝试将元素的 ID 更改为其他内容，以便它可以采用该类的可拖动属性。我也尝试过在 drop 函数中对其进行编程，但我遇到了问题。
我不知道如何引用刚刚放下的可拖动元素以对其进行操作。有人告诉我它是 $(ui.draggable) 或 $(ui.draggable).clone()，但是当我尝试引用它并对其调用 draggable 时使用我想要的选项，它不起作用。我得到的最好的结果是它在放下后可以拖动，但它会不断复制自己并且不包含在框内。
任何帮助将不胜感激，我对所有这些东西都是新手。我确实看过 JQuery API，但它在这方面对我帮助不大。
编辑:
我的 HTML 是:
<body>
<img src="doodads/i1.gif" class="doodad">
<img src="doodads/i2.gif" class="doodad">
<img src="doodads/i3.gif" class="doodad">
<img src="doodads/i4.gif" class="doodad">
<div class="box" />
</body>
CSS 是:
.box {
width:500px;
height:500px;
background: orange;
}
最佳答案
您可以在放置的元素上设置一个类，例如copied 然后检查删除的元素是否已经有那个类，如果有就停止克隆。
要限制框内的移动，您可以使用 containment可拖动选项:
Constrains dragging to within the bounds of the specified element or region.
代码:
$(document).ready(function () {
$(".doodad").draggable({
helper: 'clone',
scroll: true
});
$(".dropped").draggable({
containment: ".box"
});
$(".box").droppable({
accept: ".doodad",
activeClass: "ui-state-default",
hoverClass: "ui-state-hover",
drop: function (event, ui) {
if ($(ui.draggable).hasClass('copied')) return
var droppedItem = $(ui.draggable).clone().addClass('copied');
droppedItem.draggable({
containment: ".box"
});
$(this).append(droppedItem);
}
});
});
演示:http://jsfiddle.net/IrvinDominin/ufHMm/
编辑
要获得放置元素的位置，我们必须计算并使用它，使用:
$(ui.helper).position().top - $(this).position().top
$(ui.helper).position().left - $(this).position().left
我们沿着它的容器获得辅助位置。
最终代码:
$(document).ready(function () {
$(".doodad").draggable({
helper: 'clone',
scroll: true
});
$(".dropped").draggable({
containment: ".box"
});
$(".box").droppable({
accept: ".doodad",
activeClass: "ui-state-default",
hoverClass: "ui-state-hover",
drop: function (e, ui) {
if ($(ui.draggable).hasClass('copied')) return
var droppedItem = $(ui.draggable).clone().addClass('copied').css({
position: "relative",
top: $(ui.helper).position().top - $(this).position().top,
left: $(ui.helper).position().left - $(this).position().left
}).draggable({
containment: ".box"
});
$(this).append(droppedItem);
}
});
});
关于javascript - 拖放后约束可拖动元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18674299/