Javascript 将图像放到另一个特定div上时切换图像

我正在寻找切换图像时，下降到一个特定的分区。例如，如果我有与图像a，B，C分区；如果我把A放在B上，A会变成D，（D，B，C）；但如果我把A放在C上，A会变成E（E，B，C）。同样，如果我把D放到B上，D会变成F（F，B，C）

这是我到目前为止的代码。。。 到目前为止，我只为divs A&B编写了代码，但我尝试使用.switchClass。addClass/.remove类；还有.replace函数，但它们似乎都不适合我。我不知道我是否实施了这些错误，或者其他地方是否存在根本性的错误。

开关2
#可拖动{宽度：100px；高度：100px；填充：0.5em；浮动：左侧；边距：
10px 10px 10px 0；边框：虚线；背景图像：url（images/needle.jpeg）；
背景大小：100px 100px；背景重复：无重复；}
#可下拉{宽度：100px；高度：100px；填充：0.5em；浮动：左侧；边距：
10px；边框：虚线；背景图像：url（images/rat.png）；背景大小：
100px 100px；背景重复：无重复；}
$（函数（）{
$（“#可拖动”）.draggable（）；
$（“#可拖放”）。可拖放({
drop：函数（事件、用户界面）{
$（“#可拖动”）.css（“背景图像”）.replace（/^url |[\（\）]/g，”）；
}
});
});

好吧，我不能真正理解你的问题，但我认为阅读jQuery UI的de文档将对你非常有帮助

编辑：好，然后，一旦您使图像可删除，您可以通过以下方式向事件添加侦听器：

$( "#MyImage" ).on( "drop", function( event, ui ) {$(this).atrr("src","newImage.jpg")} );

---

如果您的图像是一个以图像为背景的div，并且您使用addClass removeClass方法，则效果会更好一些，但这对您来说很重要。

您使用了错误的css（）方法。 只需使用一个参数，即可返回属性值，然后使用.replace（/^url |[（）]/g'）；完全不执行任何操作（如果不更改元素的值，返回的值将消失。您可能希望使用：

$( '#draggable' ).css( "background-image",$( '#draggable' ).css( "background-image" ).replace(/^url|[\(\)]/g, '') );

---

但这会使您的代码无法恢复。我建议您改用类。

谢谢您的链接。这很有帮助，但我想要“将我拖到我的目标”要更改，而不是目标，我希望拖动的项目返回到其原始位置。此外，我希望它是img更改而不是更改一旦您使图像可删除，您可以通过以下方式附加侦听器：（参见我的编辑）谢谢Christian。我的代码非常类似，只是缺少ui和（此），我试图更改id而不是.attr.中的src。这是我一直在寻找的，但它似乎仍然不起作用。这会更改正在删除的div的映像还是会更改正在删除的div的映像？我尝试了提供的代码，但对我无效。为了使用类，我会更改#draggable and吗#可拖放到.draggable和.dropable？；将id=draggable更改为class=draggable？；添加一个类似.drople的类；并将我的代码更改为$（“#dropable”）.dropable（{drop:function（event，ui）{$（'#draggable'）.switchClass（“draggable”，“droped”）；}}）；我试图更改上面的代码，但现在。draggable div不可拖动。