我正在尝试构建一个jQuery插件,允许您拖动和绘制一个矩形(或带边框的div),但我不知道该怎么做。我不知道目前有这种能力,所以我不知道在哪里寻找如何做到这一点的例子。
如何在jQuery中实现拖放?
当你想到它时,这类事情的基础很简单:
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();
});
});
});
但是:ぁzxswい