我正在尝试构建一个 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();
});
});
});
关于javascript - jQuery 拖拽和绘制,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8884803/