сравнить положение нескольких divs

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 с коробкой класса. Количество divs может время от времени меняться, поэтому я не могу просто поместить каждую позицию в строку, а затем сравнить перетаскиваемый с каждым из них. Есть ли способ сделать это?

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()); 
     } 
    } 
}); 

Demo --->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 не двигаются ... лучше - позиции кэша для массива и затем сравните