jQuery UI仅在特殊区域中删除元素 [英] jQuery UI dropping elements only in special areas
问题描述
我遇到了jQuery UI的拖放问题。我动态创建新元素,这些元素放在屏幕上的四个区域之一。这些元素是可拖动的,我可以将它们放在屏幕上。但我希望这些元素只能放在三个区域之一上。
I have a problem with jQuery UI's drag and drop. I create dynamically new elements which are placed on the screen in one of four areas. These elements are draggable and I can place them all over the screen. But I want that these elements can only be dropped on one of the three areas.
我在这里创建了一个完整的例子: http://jsbin.com/enusu4/
I created a full working example here: http://jsbin.com/enusu4/
点击红色边框区域中的文字,创建一个新元素并将其放置在绿色区域 drop1
中。此元素现在只能放置到其中一个绿色区域( drop1
, drop2
或 drop3
),其他地方。我怎么能这样做?
By clicking the text in the red bordered area, a new element is created and placed in the green area drop1
. This element should now only be droppable to one of the green areas (drop1
, drop2
or drop3
), nowhere else. How can I do this?
最好的问候,蒂姆。
推荐答案
我已经回答了类似的问题这里,通过一些修改,它可以做你想要的:
Javascript:
I've answered a similar question here, with some modifications it could do what you want:
Javascript:
$(function() {
$('.drag').draggable({
revert: "invalid",
scope: "items"
});
$('#droppable').droppable({
scope: "items",
// if you want to disable the dragging after drop un-comment this
/*
drop: function(e, ui) {
$(ui.draggable).draggable({"disabled":true});
}
*/
});
$('#droppable2').droppable();
$(':button').click(function() {
var $box = $('<div class="drag">Drag me</div>');
$('#cont').append($box);
$box.draggable({
revert: "invalid",
scope: "items"
});
});
});
HTML:
<div><button type="button">Add box</button></div>
<div id="droppable">Drop here</div>
<div id="droppable2">Out of scope!</div>
<div class="clear"></div>
<div id="cont">
<div id="draggable" class="drag">Drag me</div>
<div id="draggable2" class="drag">Drag me</div>
</div>
编辑:
好的,这是一个更新:
Javascript:
Okay, here's an update:
Javascript:
$(function() {
var dragOptions = {
revert: "invalid",
scope: "items",
helper: "clone"
}
$('.drag').draggable(dragOptions);
$('.droppable').droppable({
scope: "items",
drop: function(e, ui) {
var $drop = $(this);
$(ui.draggable).draggable({
"disabled": true
}).appendTo($drop);
}
});
$('#droppable2').droppable();
$(':button').click(function() {
var $box = $('<div class="drag">Drag me</div>');
$('#cont').append($box);
$box.draggable(dragOptions);
});
});
HTML:
<div><button type="button">Add box</button></div>
<div style="float: left;"><h3>Drop here:</h3>
<div class="drop1 droppable"></div>
</div>
<div style="float: left;"><h3>Drop here:</h3>
<div class="drop2 droppable"></div>
</div>
<div style="float: left;"><h3>Out of scope!</h3>
<div id="droppable2"></div>
</div>
<div class="clear"></div>
<div id="cont">
<div class="drag">Drag me</div>
<div class="drag">Drag me</div>
</div>
这篇关于jQuery UI仅在特殊区域中删除元素的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!