Jquery-根据用户拖动图像的方向进行图像切换

我正在使用JQuery，并希望执行以下操作。我有两张汽车的照片。一个面向左侧，一个面向右侧（x轴）。当用户点击并将汽车拖向我想要的方向时 将要切换到同一方向的汽车

以下是我目前掌握的情况：

我有一个名为#car的DIV分配给这个代码

$(function() {
    $( "#car" ).draggable();
  });

而且拖得很好。然后我有一个图像被包装在#car div中，名为#myImage，HTML代码如下：

 <img id="myImage" src="" alt="" height="42" width="42" />

然后我有了我正试图“连接”到下面的#myImage的Jquery代码

function carDirection(){
var currentPosition = $("#myImage").text(this.id + offset.left );
if ("#myImage" <= currentPosition){
    $("#myImage").attr("src", "leftCar.png");   
  }
  else {
    $("#myImage").attr("src", "rightCar.png");
  }
};

函数carDirection（）{
var currentPosition=$（“#myImage”）.text（this.id+offset.left）；
如果（“#myImage”，您需要使用
拖动
回调函数
.draggable（）
来确定自上次以来汽车是向左还是向右移动

编辑：代码更新为更清晰，有更多注释


//定义用于保存要使用的图像的自定义对象。
//根据实际代码的要求进行更改。
变量精灵={
汽车：{
左：'http://placehold.it/200&text=Left',
右：'http://placehold.it/200&text=Right'
}
};
$（函数（）{
var carImage=document.getElementById（'myImage'）；//无需使用jQuery来获取ID
$（'汽车'）。可拖动({
//定义要持续运行的行为
//当汽车被拖走的时候。
拖动：函数（事件、ui）{
//获取最后一个左侧位置（考虑x坐标）
//正在拖动的对象（辅助对象）的
//使用jQuery数据方法
//该信息与实际的HTML元素本身相对应。
//请注意，如果这是首次使用该函数
//运行时，没有此类数据，因此“| | thisX”确保
//第一次有一个值。
var thisX=ui.offset.left，
lastX=ui.helper.data（'lastlight'）| | thisX；
如果（thisXlastX）{
//一定是向右转了
carImage.src=sprites.car.right；
}
//如果“x-coord”是相同的，不要做任何事情
//否则会导致闪烁。
//存储当前位置以与下次进行比较
//此函数正在运行。
ui.helper.data（'lastLeft'，thisX）；
}
});
});​

请注意，您最好使用CSS类和sprite图像（包含左右汽车图像的单个图像），因为我相信对于大多数浏览器来说，更改同一图像的背景位置比更改
src
要快。而且，您只需要加载一个图像，因此您不需要在图像第一次更改时加载另一个方向的图像。这有意义吗

我的代码中还有什么现在没有意义的吗？
var offset=$（“#myImage”）.offset（）；
var offset = $("#myImage").offset();
$("#myImage").draggable({
    drag: function() {
       var this_offset = $(this).offset();
       if(this_offset.left < offset.left) {
          $(this).attr('src','leftCar.png');
       } else {
          $(this).attr('src','rightCar.png');   
       }
    }
});​

$（“#myImage”）.draggable({
拖动：函数（）{
var this_offset=$（this）.offset（）；
如果（此偏移量左<偏移量左）{
$（this.attr（'src'，'leftCar.png'）；
}否则{
$（this.attr（'src'，'rightCar.png'）；
}
}
});​

我已经加入了一个使用背景色而不是图像的选项。
我相信您正在寻找一个可拖动的图像旋转木马。好的方面是我完全复制并粘贴了您的代码，它成功了！坏的方面是我对编程还不熟悉，我不懂它，所以现在我觉得有义务放弃我项目的其余部分直到我这么做。非常感谢！@道士没问题！为了让代码更容易理解，我用更多的注释重新编辑了代码，并为您/其他人制作了一个JSFIDLE示例。让我知道它是否有助于您更好地理解，如果它解决了您的问题，请接受这个答案。我将查找图像精灵。这对我来说是新的。谢谢对于注释。我查看了JSFIDLE，div除了蓝色外没有任何变化。正如我所说的，我使用改变背景颜色来表示左/右运动，而不是背景图像，因为我无法访问您的图像。您在我发表评论后对其进行了编辑。我看到它可以工作。谢谢！杰米：您的代码的问题是它看初始位置来确定汽车是否向左或向右移动。我相信@道士希望它能考虑用户在“当时”拖曳的方向，而不是相对于原来的位置。因此，你需要做我在答案中所做的，并且每次都把偏移量存储起来。
var offset = $("#myImage").offset();
$("#myImage").draggable({
    drag: function() {
       var this_offset = $(this).offset();
       if(this_offset.left < offset.left) {
          $(this).attr('src','leftCar.png');
       } else {
          $(this).attr('src','rightCar.png');   
       }
    }
});​