javascript jQuery 拖拽绘制

jQuery drag and draw

提问by Andrew

I'm trying to build a jQuery plugin that allows you to drag and draw a rectangle (or a div with a border) but I'm not sure how to do it. I don't know of any that currently have this ability so I don't know where to look for an example of how to do this.

我正在尝试构建一个 jQuery 插件，它允许您拖动和绘制一个矩形（或一个带边框的 div），但我不知道该怎么做。我不知道目前有任何人具有这种​​能力，所以我不知道去哪里寻找如何做到这一点的例子。

How can I implement drag and draw in jQuery?

如何在 jQuery 中实现拖动和绘制？

回答by Peter-Paul van Gemerden

The basics for something like this are quite simple, when you think about it:

当你考虑它时，像这样的事情的基础非常简单：

• Listen for mousedownevents on some container (possible the entire document);
  • Place an absolutely positioned element at the position of the mouse, using the mouse coordinates from the eventobject (e.pageXand e.pageY);
  • Start listening to mousemoveevents to change the widthand heightobject (based on the mouse coordinates);
• Listen for the mouseupevent to detach the mousemoveevent listener.

• 侦听mousedown某个容器（可能是整个文档）上的事件；
  • 使用来自event对象（e.pageX和e.pageY）的鼠标坐标，在鼠标位置放置一个绝对定位的元素；
  • 开始听mousemove事件来改变width和height对象（基于鼠标坐标）;
• 侦听mouseup事件以分离mousemove事件侦听器。

The aforementioned absolute placed element is, e.g., a <div>with a border and background: transparent.

前面提到的绝对放置元素是例如<div>带有边框和的a background: transparent。

Update:here is an example:

更新：这是一个例子：

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

Demo: http://jsbin.com/ireqix/226/

演示：http: //jsbin.com/ireqix/226/

回答by temp

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

});