如何用jquery跟随鼠标指针制作图片?

我发现拖放很困难(你知道,移动时按住鼠标按钮),并希望提供一个“选择和放下”,用户点击图标并再次点击绘图板以放下相应的元素(图片)。

你是如何用jquery做到的?

谢谢。

编辑:我有两个div,一个用于选择元素的图标板,以及一个用于放置图片的绘图板。 当鼠标进入绘图板时,我希望较大图像的50%不透明度跟随鼠标指针,以便用户通过单击它将被丢弃的位置以及是否与绘图板上已有的任何内容重叠来知道。

答案(使用James Black的帮助)是:

HTML

JQuery的

 $("#sketch").mousemove(function(e){ $('.follow').css({'top': e.clientY - 20, 'left': e.clientX - 20}); }); 

Jsbin 在这里演示。

只需将元素存储在click事件可访问的某个变量中。

所以,在每个图像上都有一个onclick: $('img').bind('click', function(e) { ... }); 然后,当他们单击时,只需将targetEvent存储在某处并将click事件绑定到绘图板。

一个有趣的方法是使用一个闭包并绑定特定的targetEvent,这样如果在绘图板上单击就会知道要移动哪一个,但只要你知道,那么你只需使用动画来将img移动到新位置。

我忘记了,您还需要确保在单击图像时,已经在绘图板上的事件处理程序在绑定新图像之前被删除。