如何使用jquery按照鼠标指针制作图片？

Question

我发现拖放很困难（你知道，移动时按住鼠标按钮），并希望提供一个“选择并放下”用户点击图标并再次点击图纸板删除相应的元素（图片）。

你如何用jquery做到这一点？

感谢。

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

Answer 1

答案（使用James Black的帮助）是：

<强> HTML

  <div id="sketch"></div>
  <img src="cat.jpg" class="follow" style="position: absolute;"/>

<强> JQuery的

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

Jsbin demo here。

Answer 2

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

所以，对每张图片进行一次onclick：$('img').bind('click', function(e) { ... }); 然后，当他们单击时，只需将targetEvent存储在某处并将click事件绑定到绘图板。

一个有趣的方法是使用一个闭包并绑定那个特定的targetEvent，以便在点击绘图板时你会知道要移动哪一个，但只要你知道，那么你将只使用将img移动到新位置的动画。

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