Jquery 使用可拖动图像更改可拖放图像的图像源

我有一个

包含三个图像，类为“droppable”。该表有四行，图像位于最后一个

元素内

HTML如下所示：

<div id="box_container">
  <img id="empty_box1" class="droppable" src="images/tom.png" />
  <img id="empty_box2" class="droppable" src="images/tom.png" />
  <img id="empty_box3" class="droppable" src="images/tom.png" />
</div>

<td><img id="" class="draggable" src="images/image1.png" /></td>

在事件回调中，您可以通过第二个参数（通常称为

ui

）的

draggable

属性访问删除的draggable元素。您可以将其源复制到Dropable，如下所示：

$（“.draggable”）.draggable({
助手：“克隆”，
回复：“无效”
});
$（“.droppable”）.droppable({
drop：函数（事件、用户界面）{
$（this.attr（“src”），ui.draggable.attr（“src”）；
}
});
img{
宽度：100px；
高度：100px；
}
.拖拉{
背景：火红；
浮动：左；
}
.dropable{
浮动：对；
背景：道奇蓝；
}

那么问题是什么？问题是如何将空框中的图像转换为要放到其中的图像。欢迎使用stackOverflow。如果您提供使用JS所需的样板HTML和CSS，而不仅仅是一个图像，这将极大地帮助那些试图帮助您的人。实际上，我们不知道什么是
#draggable1
，
#draggable2
等等，也不知道您的HTML结构。请编辑您的问题并更新更多信息。顺便说一句，你真的应该使用一个公共类，而不是用
id
逐个初始化每个可拖动的类，除非初始化选项不同。我已经尝试从我的HTML中添加了一些代码片段，并且对jQuery做了一些调整。希望这更有用，因为我将非常感谢您对我的问题的任何帮助。@Rinusu是否提供了答案（将Dropables源设置为
ui.draggable.attr（“src”）
）帮助。。？
$(document).ready(function () {
  $(".draggable").draggable({
    revert: true,
    snap: ".droppable",
    snapMode: "inner"
  });
  $("#tabellen").tablesorter();
  $(".droppable").droppable({
    accept: ".draggable",
    drop: function () {
        console.log(this);
        var new_pic = $('.draggable').attr('src');
        $(this)
            .attr('src', new_pic)
            .attr('width', 150)
            .attr('height', 150)
            .addClass('zoomable');
    }
  });
});