jQuery arrastrar y dibujar

Question

Estoy tratando de crear un complemento jQuery que te permita arrastrar y dibujar un rectángulo (o un div con un borde) pero no estoy seguro de cómo hacerlo. No conozco ninguno que actualmente tenga esta capacidad, así que no sé dónde buscar un ejemplo de cómo hacerlo.

¿Cómo puedo implementar arrastrar y dibujar en jQuery?

Answer 1

Los fundamentos para algo como esto son bastante simples, cuando se piensa en ello:

• Escuchar para mousedown eventos en algún recipiente (posibles todo el documento);
  • Coloque un elemento absolutamente posicionado en la posición del mouse, usando las coordenadas del mouse del objeto event (y e.pageY);
  • Comienza a escuchar los eventos mousemove para cambiar el objeto width y height (basado en las coordenadas del mouse);
• Escucha el evento mouseup para separar el detector de eventos mousemove.

El elemento colocado absoluto mencionado es, por ejemplo, un <div> con un borde y background: transparent.

Actualización: aquí es un ejemplo:

$(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(); 
     }); 
    }); 
}); 

Demostración: http://jsbin.com/ireqix/226/