Обнаружение позиции div

Question

Я создал небольшую игру, в которой некоторые блоки перемещаются вокруг основного деления. Мышь, которая также держит div (я назначил позицию курсора этому div).

Я просто хочу отследить, движется ли курсор над блоками (это тоже div). Если так и произойдет, игра закончится.

Как я могу определить, перемещается ли блок или курсор курсора друг на друга?

Answer 1

Если вы используете jQuery, вы можете найти левую, верхнюю, ширину и высоту div, используя эти:

$(myDiv).offset().left
$(myDiv).offset().top
myDiv.offsetWidth
myDiv.offsetHeight

Используйте их для работы слева, справа, сверху и снизу каждого деления. Тогда два div перекрывают друг друга, если:

left1 < right2 && left2 < right1 && top1 < bottom2 && top2 < bottom1

Answer 2

Это не простая задача с использованием простого javascript, потому что вам нужно проследить происхождение div и суммировать относительные позиции, пока вы не найдете абсолютно позиционированный div.

С другой стороны, эта задача довольно тривиальна с библиотекой javascript, такой как jQuery или Prototype. Например, в jQuery $(myDiv).offset() возвращает позицию div относительно документа.

Если вы также включите jQuery UI и сделаете свой основной div «перетаскиваемым», а все остальные div-ы «Droppable», все, что вам нужно, это подключить к событию Droppable over over чтобы получать уведомления, когда основной div перетаскивается поверх другого.

Answer 3

Если вы не хотите использовать jQuery, вы можете скопировать / вставить отсюда (код LGPL); http://code.google.com/p/ra-ajax/source/browse/trunk/Ra/Js/Ra.js

Место для поиска - это функция "абсолютизации" в строке №. 220, который рекурсивно вычисляет размер «узлов-предков» в цикле while.

Вставлено сюда для ссылок;

var valueT = this.offsetTop  || 0;
var valueL = this.offsetLeft  || 0;
var el = this.offsetParent;

while (el) {
  Ra.extend(el, Ra.Element.prototype);
  if( el.tagName == 'BODY' ) {
    break;
  }
  var pos = el.getStyle('position');
  if( pos == 'relative' || pos == 'absolute') {
    break;
  }
  valueT += el.offsetTop  || 0;
  valueL += el.offsetLeft || 0;
  el = el.offsetParent;
}

"this" - это элемент DOM ...

Однако я подозреваю, что то, что у вас есть, является абсолютно позиционированным div внутри другого div с позиции: относительной, в этом случае вы можете просто использовать;

var y = parseInt(myElement.style.top, 10);
var x = parseInt(myElement.style.left, 10);

, что на несколько порядков быстрее, чем выполнение "смещенных циклов" ...

Answer 4

getBoundingClientRect ()

У Джона Ресига есть отличная статья: getBoundingClientRect - это круто

Answer 5

Концепция, о которой вы говорите, называется обнаружение столкновений .

Очень просто, вам нужно получить границы вашего div и затем пройтись по всем блокам, чтобы увидеть, перекрываются ли они.