Question

我有一个可拖动的对象。当对象离开位置与另一个div相同时，应显示警告消息。例如：

<div id="ha">1</div>
<div id="ha2" class="box">2</div>
<div id="ha3" class="box">3</div>
<div id="ha4" class="box">4</div>

JS：

var posbox = $(".box").position();
var boxleft = posbox.left;
$("#ha").draggable({
drag: function () {
    var pos = $(this).position();
    var left = pos.left;
    if (left == boxleft) {
        alert("same");
    }
}
});

问题是它只将第一个div与类框进行比较。 div的数量可能会不时变化，因此我不能只将每个位置放在一个字符串中，然后将draggable与每个位置进行比较。有没有办法做到这一点？

Answer 1

你可以这样做 -

var posbox = $(".box").map(function () {
    return $(this).position().left;
}).get();
$("#ha").draggable({
    drag: function () {
        var pos = $(this).position();
        var left = pos.left;
        var p = $.inArray(left, posbox);
        if (p > -1) {
            console.log("same to : " + $('.box').eq(p).text());
        }
    }
});

演示---> http://jsfiddle.net/9yyKN/4/

Answer 2

一种解决方案是遍历具有div类的所有box并将其position().left值存储在数组中，如下所示：

var arr = [];
$('.box').each(function() {
    arr.push($(this).position().left);
});

然后，在您的drag函数中，在拖动时迭代数组。在if声明中运行此内容。

$.each(arr, function(i) {
    if(left == arr[i]) {
        alert("same");
    }
});

JSFiddle：http://jsfiddle.net/9yyKN/2/

Answer 3

$("#ha").draggable({
    drag: function () {
        var pos = $(this).position();
        var left = pos.left;
        $(".box").each(function() {
            if (left == $(this).position().left) {
                alert("same");
            }
        });
    }
});

如果.box s没有移动，则不建议这样做...更好的是缓存位置到数组然后比较

比较多个div的位置

3 个答案: