jQuery拖拽和绘图

Question

我想制作一个jQuery插件，允许您拖拽和绘制一个矩形（或带有边框的div），但我不确定如何做。我不知道是否已经有这种功能的插件，因此不知道在哪里找到示例来完成此操作。

如何在jQuery中实现拖放与绘制？

- Andrew

Answer 1

像这样的东西的基础知识相当简单，当你思考它时：

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

前面提到的绝对定位元素是一个带有边框和background: transparent的<div>，例如：

更新: 这里有一个示例：

$(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/

- Peter-Paul van Gemerden

---

为了让任何跟进此事的人都能理解，我已经更新了您的答案，并提供了解决不同方向拖动的方法。 - Andrew

我需要一个快速的HTML图像映射器，就像这个一样（只有矩形适合我的需求）。它包含了上述的双向拖动更改，并输出HTML图像映射源代码。http://jsbin.com/ireqix/91 - frumbert

当您快速移动选择框（但仍在文档区域内）时，起始位置有时会出现混乱，但当您继续移动时，它似乎会弹回到正确的位置。例如，如果您来回移动左/右，最终起始位置会被偏移。您知道为什么会发生这种情况吗？ - chinabuffet

@chinabuffet 你说得完全正确。我稍微改写了代码以规避这个问题。谢谢你的提醒！ - Peter-Paul van Gemerden

这种事情（社区协作）就是我仍然喜欢SO的原因。 - mtyson

Answer 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");
    });

});

- temp