我正在寻找一个拖放示例,其中拖动项目有两个不同的区域,必须与两个可放置的区域匹配。
例子:
我希望蓝色拖动项目恢复,除非它被放置在其每个红色子项都落在绿色区域的位置。
理想情况下,我想使用 jquery ui(因为我有它的经验),但是任何 javascript 库都可以,在此先感谢。
我正在寻找一个拖放示例,其中拖动项目有两个不同的区域,必须与两个可放置的区域匹配。
例子:
我希望蓝色拖动项目恢复,除非它被放置在其每个红色子项都落在绿色区域的位置。
理想情况下,我想使用 jquery ui(因为我有它的经验),但是任何 javascript 库都可以,在此先感谢。
您可以通过使用draggable
/droppable
选项的组合来完成此操作。给定这样的 HTML:
<div id="blue" class="valid">
<div id="red-one" class="red"></div>
<div id="red-two" class="red"></div>
</div>
<div id="green-container">
<div id="green-one" class="green">
</div>
<div id="green-two" class="green">
</div>
</div>
(省略 CSS,我确实添加了一些规则,请参见下面的小提琴)。
你可以这样写 JavaScript:
function isInside(one, other) {
return one.offset().left >= other.offset().left &&
one.offset().top >= other.offset().top &&
one.offset().top + one.height() <= other.offset().top + other.height() &&
one.offset().left + one.width() <= other.offset().left + other.width();
}
$("#blue").draggable({
drag: function(event, ui) {
var $this = $(this);
var $reds = $this.children(".red");
var $greens = $("#green-container").children(".green");
var firstRed = $reds.first();
var firstGreen = $greens.first();
var secondRed = $reds.last();
var secondGreen = $greens.last();
if (isInside(firstRed, firstGreen) && isInside(secondRed, secondGreen)) {
$this.addClass('valid');
}
else {
$this.removeClass('valid');
}
},
revert: 'invalid'
});
$("#green-container").droppable({ accept: ".valid" });
在这里查看:http: //jsfiddle.net/andrewwhitaker/g6FKz/
笔记:
div
是包含这些元素的白色。从示例中应该可以清楚地看到这一点。div
时,都会调用“drag”事件,该事件会确定红色框是否在绿色框内,并为valid
draggable 分配一个类div
。可放置对象仅接受valid
可拖动对象。希望有帮助!