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 OR distanceY < 0

Here's a demo using your original fiddle

そして、ここでは、私はちょうどそれの後に追加するものです第2 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)