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/