Создание моей собственной "перетаскиваемой" функции

Question

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

Вот jsfiddle:

jsfiddle

Answer 1

Я исправил ваш jsfiddle, попробуйте: http://jsfiddle.net/5Sxrq/2/

Проблемы были:

margin-top:100px;
margin-left:80px;

, если вы хотите использовать поля, вам придется вычестьиз смещений

boxOff = $('#box').offset();
mouseOffX = e.pageX - boxOff.left;
mouseOffY = e.pageY - boxOff.top;

Вы должны получить mouseOffX и mouseOffY при вызове события mousedown, а не каждый раз с mousemove

РЕДАКТИРОВАТЬ: это с фиксированнымвопросы маржи: http://jsfiddle.net/5Sxrq/3/

Answer 2

Причина, по которой вы мерцаете, заключается в том, что вы вычисляете смещение мыши внутри блока при каждом перемещении мыши. Если вы просто вычислите mouseOffX и mouseOffY один раз в onmousedown, у вас не будет мерцания.

Вот модифицированная версия. У него все еще есть некоторые проблемы, но нет мерцания: http://jsfiddle.net/RzqQE/

Я попытаюсь исправить странную смещение в моей версии, но я не могу дать вам никаких гарантий - я могу заснуть в любой момент.

Редактировать: Ах, это исправлено. Вот версия, которая работает: http://jsfiddle.net/7QzZM/

Теперь, чтобы объяснить, что я сделал:

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

Другое отличие заключалось в том, что я использовал $('#box').position() вместо $('#box').offset(); это возвращает позицию относительно родителя блока, а не относительно документа.