比较多个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 S作一类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的不动，这是不建议报告...更好缓存阵列的位置和然后比较