javascript - jQuery 拖拽和绘制

Question

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

如何在 jQuery 中实现拖拽和绘图？

Answer 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/