jQueryドラッグ＆ドロー

Question

jQueryプラグインをビルドしようとしています。これは、四角形（または境界線付きのdiv）をドラッグして描画することができますが、どうすればよいか分かりません。私はこの能力を現在持っているものは知らないので、これを行う方法の例をどこで探すべきかわからない。

jQueryでドラッグアンドドローを実装するにはどうすればよいですか？

Answer 1

このような何かのための基本は、あなたがそれについて考えるとき、非常に簡単です：

• は、いくつかの容器（可能な文書全体）のmousedownイベントの音を聞きます。
  • eventオブジェクト（e.pageXおよびe.pageY）からのマウス座標を使用して、絶対位置の要素をマウスの位置に配置します。
  • オブジェクトとheightオブジェクトを（マウス座標に基づいて）変更するには、mousemoveイベントの受信を開始してください。
• mouseupイベントをリッスンして、mousemoveイベントリスナーを切り離します。

上記の絶対配置要素は、例えば、<div>の境界線とbackground: transparentである。

アップデート：ここは一例です。

$(function() { 
    var $container = $('#container'); 
    var $selection = $('<div>').addClass('selection-box'); 

    $container.on('mousedown', function(e) { 
     var click_y = e.pageY; 
     var click_x = e.pageX; 

     $selection.css({ 
      'top': click_y, 
      'left': click_x, 
      'width': 0, 
      'height': 0 
     }); 
     $selection.appendTo($container); 

     $container.on('mousemove', function(e) { 
      var move_x = e.pageX, 
       move_y = e.pageY, 
       width = Math.abs(move_x - click_x), 
       height = Math.abs(move_y - click_y), 
       new_x, new_y; 

      new_x = (move_x < click_x) ? (click_x - width) : click_x; 
      new_y = (move_y < click_y) ? (click_y - height) : click_y; 

      $selection.css({ 
       'width': width, 
       'height': height, 
       'top': new_y, 
       'left': new_x 
      }); 
     }).on('mouseup', function(e) { 
      $container.off('mousemove'); 
      $selection.remove(); 
     }); 
    }); 
}); 

デモ：http://jsbin.com/ireqix/226/