Question

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

如何在jQuery中实现拖放？

Answer 1

当你想到这个时，这类事情的基础很简单：

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

前面提到的绝对放置元素是例如带有边框<div>的{{1}}。

更新：以下是一个示例：

background: transparent

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

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

});

jQuery拖动和绘制

2 个答案: