Подтвердить что ты не робот

JQuery перетаскивание и рисование

Я пытаюсь построить плагин jQuery, который позволяет перетаскивать и рисовать прямоугольник (или div с рамкой), но я не уверен, как это сделать. Я не знаю, что в настоящее время имеет эту способность, поэтому я не знаю, где искать пример того, как это сделать.

Как я могу реализовать drag and draw в jQuery?

Ответ 1

Основы для чего-то вроде этого довольно просты, когда вы думаете об этом:

Слушайте события mousedown на каком-либо контейнере (возможно весь документ);
- Поместите абсолютно позиционированный элемент в положение мыши, используя координаты мыши из объекта event (e.pageX и e.pageY);
- Начать прослушивание событий mousemove для изменения объектов width и height (на основе координат мыши);
Слушайте событие mouseup для отсоединения прослушивателя событий mousemove.

Вышеупомянутый элемент с абсолютным положением представляет собой, например, a <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/

Ответ 2

$("#YOUR_ELEMENT_ID").on("mousedown", function (e) {
    var click_x = e.pageX;
    var click_y = e.pageY;

    /* Posição do objeto */
    var x = parseFloat($(this).css("left").replace("px", "")),
        y = parseFloat($(this).css("top").replace("px", ""));
    /* Calcula distância no eixo x */
    var distanc_x = Math.abs(x - click_x);
    var distanc_y = Math.abs(y - click_y);

    $("#YOUR_ELEMENT_ID")
        .on("mousemove", function (e) {

            var new_x = e.pageX - distanc_x;
            var new_y = e.pageY - distanc_y;

            $(this).css({
                top: new_y,
                left: new_x,
            });

        }).on("mouseup", function (e) {
        $(this).off("mousemove");
    });

});