выбор мыши jQuery не работает должным образом

Question

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

Fiddle

distanceStart = 0; 
distanceEnd = 0; 
mousedown = false; 

$(window).on('mousedown',function(e){ 
    e.preventDefault(); 
    mousedown = true; 
    distanceXStart = e.clientX; 
    distanceYStart = e.clientY; 
    $div = $('<div/>', { 
     class: 'class' 
    }).appendTo('body'); 
}); 

$(window).on('mouseup',function(e){ 
    e.preventDefault(); 
    mousedown = false; 
    $div.remove(); 
}); 

$(window).on('mousemove',function(e){ 
    e.preventDefault(); 
    if(mousedown){ 
     distanceXEnd = e.clientX; 
     distanceYEnd = e.clientY; 
     distanceX = (distanceXEnd - distanceXStart); 
     distanceY = (distanceYEnd - distanceYStart); 
     if(distanceX > 0 && distanceY > 0){ 
      $div.css({ 
       'left': (e.clientX - (distanceX/*/2*/)), 
       'top': (e.clientY - (distanceY/*/2*/)), 
       'width': distanceX, 
       'height': distanceY 
      }); 
     }else 
     if(distanceX < 0 && distanceY < 0){ 
      $div.css({ 
       'left': e.clientX, 
       'top': e.clientY, 
       'width': (1-distanceX), 
       'height': (1-distanceY) 
      }); 
     } 
    } 
}); 

Answer 1

Вы были почти там, вы просто забыли два других условия, чтобы проверить: distanceX < 0 ИЛИ distanceY < 0

Here's a demo using your original fiddle

И вот что я добавил только после того, второй else if заканчивается:

// ... stuff 
else if (distanceX < 0) { 
    $div.css({ 
     'left': e.clientX, 
     'top': e.clientY - distanceY, 
     'width': (1 - distanceX), 
     'height': distanceY 
    }); 
} 
else if (distanceY < 0) { 
    $div.css({ 
     'left': e.clientX - distanceX, 
     'top': e.clientY, 
     'width': distanceX, 
     'height': (1 - distanceY) 
    }); 
} 

Answer 2

Вы можете выполнить этот тип взаимодействия с HTML5 canvas. https://jsfiddle.net/nbwLr27s/1/

Холст хороший для такого рода вещей, так как он дает вам полный контроль над фигурами, которые вы хотите отображать, и очень хорошо работает, поскольку нет манипуляций с DOM.

С холстом fillRect все, что вам нужно, это начало x, начало y, ширина и высота. Я использовал следующий код:

var leftmost = Math.min(start_x, coords.x) 
    var rightmost = Math.max(start_x, coords.x) 
    var lowest = Math.min(start_y, coords.y) 
    var highest = Math.max(start_y, coords.y) 
    ctx.fillRect(leftmost, lowest, rightmost - leftmost, highest - lowest)