javascript - 比较多个div的位置

Question

我有一个可拖动的对象。当对象左侧位置与另一个 div 相同时，应出现警告消息。例子：

http://jsfiddle.net/9yyKN/1/

<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 的数量可能会不时改变，所以我不能只是将每个位置都放在一个字符串中，然后将可拖动的内容与它们中的每一个进行比较。有没有办法做到这一点？

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具有类的 sbox并将它们的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");
            }
        });
    }
});

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