Координаты элементов HTML

Question

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

Если вы не понимаете, о чем я, откройте электронную таблицу и перетащите область. Я хочу, чтобы div идеально совпал с границами ячейки.

У меня есть очень хорошее представление о том, как это сделать, но как бы получить координаты (x, y) (положение экрана) ячейки таблицы (td)?

Answer 1

Используйте .offset() вместе с .height() и .width(), если необходимо.

var td = $(someTDReference);
var pos = td.offset();
pos.bottom = pos.top + td.height();
pos.right = pos.left + td.width();
// pos now contains top, left, bottom, and right in pixels

Редактировать: Не .position(), используйте .offset().Обновлено выше.

Редактировать: Изменено pos.width() на td.width()

Answer 2

Эй, ты должен быть в состоянии сделать это так (jsFiddle): http://jsfiddle.net/jackrugile/YKHkX/

$('td').hover(function(){
    var xPos = Math.floor($(this).offset().left);
    var yPos = Math.floor($(this).offset().top);
});

Math.floor избавляет от сумасшедших десятичных дробей и облегчает работу, на мой взгляд. Надеюсь, это поможет!

Answer 3

Вы можете использовать pageX и pageY для отслеживания курсора мыши x, y

$("#your_div").mouseover(function(e))
{
    x = e.pageX;
    y = e.pageY;
}

Вы можете установить границу div, чтобы подсветить div при наведении курсора просто на

$("#your_div").css("border","1px solid black");

это будет показывать текущий эффект выбора div ...

что если если div равен

position: fixed и затем вы можете прочитать его свойство left и top

надеюсь, что это поможет вам

Answer 4

Для тех, кто не хочет использовать jquery:

var coordinates = td.getBoundingClientRect();
console.log(coordinates.left, coordinates.top, coordinates.right, coordinates.bottom);