Question

我有一个“只有拖拽”的区块，我有一些图像和另一个“可排序的”区块，我可以从“仅可拖动”中删除项目。

我想要做的是将图像拖动到“仅可排序”以附加托管在我服务器上的较大版本的拖动图像。

我认为如果有办法检查项目何时被拖入可排序列表然后附加新图像，这可能相对容易。

这是实际的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'
});
});

这是我目前拥有的jsfiddle：

（将鼠标悬停在“标题”上，然后将图像拖入“在这里通过标题和拖放图像”块中

我看过插件API，但我找不到跟踪项目何时被拖入可排序区域的方法？

有关如何执行此操作的任何建议？

Answer 1

我正在查看jQuery UI API并找到了：

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

Answer 2

如果我了解您拍摄的内容，可以在可排序列表中使用接收功能。

<强> Working Example

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

The documentation says：

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

但显然在使用连接的可拖动时也会触发。

拖动小图像后附加大图像

2 个答案: