jQuery的拖動和繪製

Question

我想要建立一個jQuery插件，允許你拖動和繪製一個矩形（或帶有邊框的div），但我不知道該怎麼做。我不知道任何目前有這種能力，所以我不知道在哪裏尋找如何做到這一點的例子。

我該如何實現拖動和繪製jQuery？

Answer 1

這樣的事情的基礎是相當簡單，當你想想看：

• 傾聽一些容器mousedown事件（可能整個文檔）;
  • 使用event對象（e.pageX和e.pageY）中的鼠標座標，在鼠標位置放置一個絕對定位的元素;
  • 開始收聽mousemove事件以更改width和height對象（基於鼠標座標）;
• 收聽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/