javascript - page - jQuery arrastrar y dibujar

jquery id value

Question

Estoy tratando de construir un complemento de 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 a nadie que tenga esta capacidad actualmente, 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 conceptos básicos para algo como esto son bastante simples, cuando lo piensas:

• mousedown eventos de mousedown en algún contenedor (posiblemente todo el documento);
  • Coloque un elemento posicionado absolutamente en la posición del mouse, usando las coordenadas del mouse del objeto de event ( e.pageX y e.pageY );
  • Comience a escuchar los eventos mousemove para cambiar el objeto de width y height (según las coordenadas del mouse);
• Escuche el evento mouseup para separar el mousemove eventos mousemove .

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

Actualización: aquí hay 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/