jQuery拖动和绘制

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

如何在jQuery中实现拖放？

Answer 1

当你想到它时，这样的基础很简单：

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

上述绝对放置的元素是例如具有边框和background: transparent的

background: transparent 。

更新：这是一个例子：

 $(function() { var $container = $('#container'); var $selection = $('
').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/