Weird jumping in Draggable elements

Question

Для удовольствия я пытался создать свои собственные перетаскиваемые divs, и я столкнулся с проблемой или двумя.

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

function DragMe(e) { 
    var relativeXPosition = (e.pageX - this.offsetLeft); 
    var relativeYPosition = (e.pageY - this.offsetTop); 
    $(document).on('mousemove',function(e) { 
     $('.move').offset({ 
      top: e.pageY - relativeXPosition, 
      left: e.pageX - relativeYPosition, 
     }); 
    }); 
}; 

$('.move').on('mousedown', DragMe); 

$('.move').mouseup(function() { 
    $(this).off('mousedown'); 
    $(document).off('mousemove'); 
    $('.move').on('mousedown', DragMe); 
}); 

http://jsfiddle.net/VpM9j/

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

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

Answer 1

Ответ довольно прост: Вы перепутали X и Y внутри функции обратного вызова

function DragMe(e) { 
    var relativeXPosition = (e.pageX - this.offsetLeft); 
    var relativeYPosition = (e.pageY - this.offsetTop); 
    $(document).on('mousemove',function(e) { 
     $('.move').offset({ 
      top: e.pageY - relativeYPosition, // you had relativeXPosition here 
      left: e.pageX - relativeXPosition, // you had relativeYPosition here 
     }); 
    }); 
}; 

$('.move').on('mousedown', DragMe); 

$('.move').mouseup(function() { // drop the other offs and ons 
    $(document).off('mousemove'); 
}); 

См: http://jsfiddle.net/VpM9j/2/

Чтобы ответить на ваш второй вопрос:

function DragMe(e) { 
    var dragDiv = e.target; 
    var relativeXPosition = (e.pageX - dragDiv.offsetLeft); 
    var relativeYPosition = (e.pageY - dragDiv.offsetTop); 

    $(document).on('mousemove',function(e) { 
     $(dragDiv).offset({ 
      top: e.pageY - relativeYPosition, 
      left: e.pageX - relativeXPosition, 
     }); 
    }); 
}; 

См: http://jsfiddle.net/VpM9j/4/

Но еще лучше событие делегации, как вам нужно только 1 слушателя событий на документе и не может быть, как многие дивы у вас есть:

function DragMe(e) { 
    var dragDiv = this; // <-- pay attention to that ;o) 
    var relativeXPosition = (e.pageX - this.offsetLeft); 
    var relativeYPosition = (e.pageY - this.offsetTop); 
    $(document).on('mousemove',function(e) { 
     $(dragDiv).offset({ 
      top: e.pageY - relativeYPosition, 
      left: e.pageX - relativeXPosition, 
     }); 
    }); 
}; 

$(document).on('mousedown', '.move', DragMe); 

$(document).on('mouseup', '.move', function() { 
    $(document).off('mousemove'); 
}); 

См: http://jsfiddle.net/VpM9j/7/

За дополнительной Infos о делегации событий см: http://api.jquery.com/on/ и там поиск «Прямые и делегированные события»