Jquery 带有文档单击的运动图像

好吧，我已经成功地移动了三个图像同时与一个单一的点击文件，但我试图设置它，使我可以控制每个图像分开。我有点迷失在如何完成这一点上，我上个月才开始

var $follower = $(".follower"),
  mouseX = 0,
  mouseY = 0;

$(document).click(function (e) {
    mouseX = e.pageX;
    mouseY = e.pageY;
   $follower.stop().animate({
      left: mouseX,
      top: mouseY
  });
});

更新的小提琴：

.js

这将分别移动每个。

---

基本上，“follower”的每个实例化都有一个侦听器，“this”引用单击的“follower”。

您可以使用ID选择器

$("#boat").click(function(){
  alert('This is boat!');
});

或将事件分配给长度

$follower.length数组中的每个元素，或

加载页面后处理所有内容的一个好主意
您可以使用以下代码段：


它确实控制了它们，但它反转了事件，现在它是通过单击图像而不是文档来控制的。如果您单击文档，那么JS无法知道您要移动哪个。或者我遗漏了什么？不，这就是我想知道的，我该如何通过文档单击来控制每一个。我想这将包括首先单击要选择的图像，然后单击文档来移动它。例如，我想这可能涉及到将一个函数绑定到图像上，我使用.on和off-maybe？@CoreyBuchillon来读取图像，这是我认为您的操作可以实现的唯一可能的方法。
单击\选择要移动的图像，然后在文档上单击
来移动它。您必须确保第二次点击没有出现在另一张图片上。好了，我们开始了。我在过去一个小时里一直在尝试类似的东西，但没有完全正确。谢谢。
$("#boat").click(function(){
  alert('This is boat!');
});

var $follower = $(".follower").on('click',function(e){
    e.stopPropagation();
    $(this).toggleClass('selected');
}),
    mouseX = 0,
    mouseY = 0;

$(document).click(function (e) {
    mouseX = e.pageX;
    mouseY = e.pageY;
    $follower.filter('.selected').stop().animate({
        left: mouseX,
        top: mouseY
    });
});