jQuery 拖拽和绘制答案

【问题标题】：jQuery drag and drawjQuery 拖拽和绘制
【发布时间】：2012-02-11 16:15:03
【问题描述】：

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

如何在jQuery中实现拖拽？

【问题讨论】：

标签： javascript jquery drag

【解决方案1】：

这样的事情的基础很简单，仔细想想：

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

上述绝对放置的元素是，例如，带有边框的<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/

【讨论】：

为了大家的关注，我更新了你的答案，解决了向不同方向拖动的问题。
我需要这样的东西来快速 html 图像映射器（矩形只适合我的需要）。包含上述双向拖动更改，并输出 html 图像地图源。 jsbin.com/ireqix/91
当您快速移动选择框（但仍在文档区域内）时，原点位置有时会变得混乱，但当您继续移动时，它似乎会弹回正确的位置。例如，如果您左右来回移动，最终原点位置会发生偏移。知道为什么会这样吗？
我认为问题在于当鼠标从原点向左移动时，x 位置（但同样适用于 y 坐标）向左调整，但在鼠标再次向右移动。放置一个将 x 位置设置回原始 click_x 的 else 子句似乎可以解决这个问题。
@chinabuffet 你说得对。我稍微重写了代码以规避这个问题。感谢您的提醒！

【解决方案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");
    });

});

【讨论】：