Javascript 拖动小图像后追加大图像

我有一个仅可拖动的块，其中我有一些图像，另一个仅可排序的块，我可以从仅可拖动的块中删除项目

我想做的是，当我将图像拖动到sortable中时，只是为了附加托管在服务器上的更大版本的拖动图像

我认为，如果有一种方法可以检查项目何时被拖到可排序列表中，然后附加新图像，那么这样做相对容易

这是实际的JS：

$(document).ready(function () {
$(".sortableList").sortable({
    revert: true,
    /*update: function (event, ui) {
        // Some code to prevent duplicates
    }*/
});
$(".draggable").draggable({
    connectToSortable: '.sortableList',
    cursor: 'pointer',
    helper: 'clone',
    revert: 'invalid'
});
});

以下是我目前拥有的一份报告：

将鼠标悬停在标题上，您应该将图像拖到标题上，然后将图像放到块中

我已经仔细查看了插件API，但我找不到跟踪项目何时被拖到可排序区域的方法

---

我该怎么做有什么建议吗

我在查看jQuery UI API时发现：

$( "#sortable li" ).droppable({
    drop: function( ) {
        //do the magic
    }
});

---

如果我理解您的拍摄目的，您的可排序列表上的接收功能应该可以工作

:

当连接的可排序列表中的项目被删除时，会触发此事件 已被删除到另一个列表中。后者是事件目标

---

但显然，当使用连接的拖拽设备时，它也会开火

您是在寻找项目何时拖过可排序区域还是项目何时实际放入可排序区域？当项目实际放入可排序区域时，好的，那么我的答案中的receive函数应该起作用。如果没有，请告诉我。我已经尝试了一些方法，请检查我对您答案的评论…我正在考虑使用jQuery append方法在那里放置一个更大的图像，但问题是它同时显示这两个图像，较小的图像和通过append方法插入的较大图像。有什么建议可以让我这样做吗？另一件事是，我将有更多的图片项目，所以我如何检查哪些项目被拖动，并基于此附加更大的图片版本？@agis老实说，我有点困惑于这一点。这是我使用replaceWith所能得到的最接近的结果，这似乎有点接近我想要实现的目标，但是你知道如何阻止拖动的元素替换并仅替换拖放的元素吗？是的，我想我会问一个新问题，谢谢你的帮助！

 $(".sortableList").sortable({
     receive: function (event, ui) {
         alert('It works');
     }
 });