Нажмите, чтобы переместить div к координатам мыши

Question

У меня есть следующий код:http://www.project -vanquish.co.cc / gridtest / drag-grid.html

План состоит в том, чтобы позволить пользователю управлять этим div (с улыбающимся лицом) тремя способами:1 - клавишами курсора на клавиатуре2 - перетаскивая div3 - нажав на область, и div переместится в эту позицию

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

Кроме того, метод «щелкнуть для перемещения» не работает вообщев IE.

Я думал, что взломал этой ночью, очевидно, нет ...

Answer 1

Вам необходимо настроить mouse coordinates, потому что они absolute (из объекта события), но вы должны работать с relative на карте.

Так что вынужны координаты карты и вычитать их из координат щелчка мыши каждый раз, когда происходит щелчок.

Вам также необходимо нормализовать координаты щелчка, чтобы иметь дело с центром персонажа (вместо верхнего левого угла).Поэтому вам нужно вычесть половину ширины и высоты символа из координат мыши.

[ Посмотреть в действии]

var mapTop     = $('#map').offset().top;
var mapLeft    = $('#map').offset().left;
var charWidth  = $('#character').outerWidth();
var charHeight = $('#character').outerHeight();

$('#map').click(function (e) {
    var mouseX = e.pageX - mapLeft - (charWidth / 2);  // convert absolute coords
    var mouseY = e.pageY - mapTop  - (charHeight / 2); // into relative ones...
    mouseX = Math.round(mouseX / 40) * 40;
    mouseY = Math.round(mouseY / 40) * 40;
    $('#character').animate({
        top: mouseY,
        left: mouseX
    })
});

Answer 2

Если есть какой-то offSet, то вы должны его поймать и добавить (как Margin).Для этого используйте firebug и прочитайте DOM (offSetX и offSetY).С помощью jQuery получите соответствующий offSet и добавьте его в поле (сверху или слева).

Я был в похожей ситуации несколько дней назад, дайте мне знать, если вы не нашли выход.Решение, предложенное NickD, вероятно, решит проблему, но, поскольку offSet может меняться от браузера к другому или при улучшении дизайна, автоматическое решение будет стоить усилий.

Answer 3

Чтобы решить проблему смещения в вашем методе click, попробуйте настроить свойства анимации сверху и слева, чтобы компенсировать встроенный стиль (top: 200px; left: 120px;), который вы применили к div #character.Например:

Вместо этого:

$('#character').animate({
    top:    mouseY,
    left:   mouseX
})

Попробуйте:

$('#character').animate({
    top:    mouseY - 200,
    left:   mouseX - 120
})

Чтобы заставить его работать в IE, попробуйте добавить точку с запятой в конце анимацииМетод:

$('#character').animate({
    top:    mouseY - 200,
    left:   mouseX - 120
});

(Оба решения не проверены.)