Jumpy div resizing using jQuery

Question

Я пытаюсь понять, почему мой выбор div прыгает на mousemove.

У меня есть этот jsbin, который я использовал для разработки этой страницы выбора раздела документа.

http://jsbin.com/IGuNEmi/7/edit

Что должно произойти это, когда вы нажимаете вниз, сверху и слева от DIV выбора устанавливается на offsetX и offsetY в mousedown события, затем используется mousemove мероприятия offsetX и offsetY для определения того, как установить свойства css для высоты и ширины div с помощью jQuery. Когда вы позволяете мыши над div документа, он должен изменить границу на зеленый и сообщить X, Y, Width, Height в координаты span.

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

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

Answer 1

Вы должны отличать event так:

var mouseDown = false; 
var mouseDownOffsetX, mouseDownOffsetY, mouseUpOffsetX, mouseUpOffsetY; 
var sel = $("#selection"); 
$(function(){ 
    $('#documentPage').mousedown(function(eventA) { 
    if(!mouseDown){ 
     mouseDownOffsetX = eventA.offsetX; 
     mouseDownOffsetY = eventA.offsetY; 
     sel.css('left', mouseDownOffsetX); 
     sel.css('top', mouseDownOffsetY); 
     sel.width(0); 
     sel.height(0); 
     sel.css('border', '1px solid red'); 
     eventA.originalEvent.preventDefault(); 
    } 
    mouseDown = true; 
    }).mouseup(function(eventB) { 
    mouseUpOffsetX = eventB.offsetX; 
    mouseUpOffsetY = eventB.offsetY; 
    sel.css('border', '1px solid green'); 
    var width = mouseUpOffsetX - mouseDownOffsetX; 
    var height = mouseUpOffsetY - mouseDownOffsetY; 
    mouseDown = false; 
    $("#coords").html(mouseDownOffsetX + ", " + mouseDownOffsetY + ", " + width + ", " + height); 
    }).mousemove(function(eventC) { 
    if(mouseDown){ 
     sel.width(eventC.offsetX - mouseDownOffsetX); 
     sel.height(eventC.offsetY - mouseDownOffsetY); 
    } 
    }); 
});