jQuery 拖拽和绘制
Posted
技术标签:
【中文标题】jQuery 拖拽和绘制【英文标题】:jQuery drag and draw 【发布时间】:2012-02-11 16:15:03 【问题描述】:我正在尝试构建一个 jQuery 插件,它允许您拖动和绘制一个矩形(或带边框的 div),但我不知道该怎么做。我不知道目前有任何人有这种能力,所以我不知道在哪里可以找到如何做到这一点的例子。
如何在jQuery中实现拖拽?
【问题讨论】:
【参考方案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/
【讨论】:
为了大家的关注,我更新了你的答案,解决了向不同方向拖动的问题。 我需要这样的东西来快速 html 图像映射器(矩形只适合我的需要)。包含上述双向拖动更改,并输出 html 图像地图源。 jsbin.com/ireqix/91 当您快速移动选择框(但仍在文档区域内)时,原点位置有时会变得混乱,但当您继续移动时,它似乎会弹回正确的位置。例如,如果您左右来回移动,最终原点位置会发生偏移。知道为什么会这样吗? 我认为问题在于当鼠标从原点向左移动时,x 位置(但同样适用于 y 坐标)向左调整,但在鼠标再次向右移动。放置一个将 x 位置设置回原始click_x
的 else 子句似乎可以解决这个问题。
@chinabuffet 你说得对。我稍微重写了代码以规避这个问题。感谢您的提醒!【参考方案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 拖拽和绘制的主要内容,如果未能解决你的问题,请参考以下文章