我正在开发拖放库,我想将鼠标的位置变化添加到拖动元素的实际位置,而不是仅仅将其位置设置为窗口中的当前光标位置。这将允许我不使用 position: fixed 并能够拖动位置相对/绝对;元素。
要知道鼠标的旧位置(在调用 mousemove 处理程序之前),我可以使用 e.pageX 和 pageY 将位置存储在上一次调用该处理程序的变量中。但是第一次移动鼠标处理程序呢?当我还没有存储旧位置时,如何知道旧鼠标位置以确定它的变化?
一段代码:
var $dragged = null,
$window = $(window),
oldMouseX = null,
oldMouseY = null;
var mouseMoveHandler = function(e) {
var curTop = $dragged.css('top'),
curLeft = $dragged.css('left');
$dragged.css({
top : curTop + e.pageY - oldMouseY,
left : curLeft + e.pageX - oldMouseX,
});
oldMouseX = e.pageX;
oldMouseY = e.pageY;
};
$('.Draggable')
.attr('draggable', true)
.css({userSelect: 'none'})
.on('mousedown', function() {
$dragged = $(this);
$window.bind('mousemove', mouseMoveHandler);
})
.on('mouseup', function() {
$dragged = null;
$window.unbind('mousemove', mouseMoveHandler);
})