拖放后约束可拖动元素 [英] Constrain draggable element after it has been dropped
问题描述
基本上，我有一组小玩意，我需要做的是能够将其中的任何项目拖到一个容纳箱中.一旦将它们放入包装盒中，它们仍然可以随意移动和操作，但是尽管可以将它们删除，但不能再次从包装盒中取出.
Basically what I have is a set of doodads, and what I need to do is to be able to drag any item in that set into a containment box. Once they are in the box, they can still be moved around and manipulated freely, but they can't be taken out of the box again though they can be deleted.
这些小玩意也被设置为克隆，因为用户可以根据需要在框中包含多个物品.
The doodads are also set to clone as a user can have more than one of the item in the box if they so desire.
因此这两个部分分别是，设置了doodad列表(已完成)，然后使其可拖动，以便可以将其拖动到可放置div框中.然后第二部分是，一旦将它放在div框中，它就必须再次可拖动，不可克隆并且还包含在该框中.
So the two parts are, set up the doodad list (already done), and then make it draggable so that it can be dragged into the droppable div box. Then the second part is that once it's in the div box, it must be draggable again, not clonable, and also contained in the box.
这是我的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函数中对其进行编程，但是遇到了问题.
I've tried many things. I tried changing the element's ID to something else so that it can take on that class' draggable attributes. I've also tried programming it within the drop function, but I'm having issues.
我不知道如何引用刚刚拖放的可拖动元素以对其进行操作.有人告诉我它是$(ui.draggable)或$(ui.draggable).clone()，但是当我尝试引用它并用所需的选项对其调用draggable时，它不起作用.我得到的最好的结果是，它放下后可以拖动，但是它一直在重复，并且没有包含在盒子中.
I have no idea how to refer to the draggable element just dropped in order to manipulate it. I was told it was $(ui.draggable), or $(ui.draggable).clone(), but when I try referring to that and calling draggable on it with my desired options, it doesn't work. The best I've gotten was that it was draggable after dropping, but it kept duplicating itself and was not contained within the box.
任何帮助将不胜感激，而我对所有这些东西都是陌生的.我确实看过JQuery API，但在这方面并没有太大帮助.
Any help would be greatly appreciated, and I am new to all of this stuff. I did look at the JQuery API but it didn't help me much in this regard.
我的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，然后检查放置的元素是否已经具有该类，如果已停止，则停止克隆.
You can set a class on the dropped element e.g. copied and than check if the dropped element have already that class and if so stop the cloning.
要限制框内的移动，可以使用以下选项的 containment 选项可拖动的:
To constrain the movement inside the box you can use containment option of draggable:
限制拖动到指定元素的范围内，或 地区.
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/
要获得放置的元素位置，我们必须使用以下方法进行计算和使用:
To get the dropped element position we had to calculate and use it, using:
$(ui.helper).position().top - $(this).position().top
$(ui.helper).position().left - $(this).position().left
我们在容器中得到了帮助者的位置.
we get the helper position along its container.
最终代码:
$(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);
}
});
});
演示: http://jsfiddle.net/IrvinDominin/ufHMm/3/
这篇关于拖放后约束可拖动元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
