Jquery ui Dragable/Dropable/sortable中第一个子元素出错

当前正在为我的网站创建拖放播放列表功能，并使用以下代码将视频拖放到播放列表容器中：

var transferred = false;
$( "#videoResultsDiv li" ).draggable({

  connectToSortable: '#Playlist',
  helper: 'clone',
    start: function(event, ui)
    {
        $(this).hide();
    },
    stop: function(event, ui)
    {
        if(!transferred)
            $(this).show();

        else
        {
            $(this).remove();
            transferred = false;
        }
    }
});


    $("#Playlist").droppable({
  tolerance: 'touch',
drop:function(event, ui) {
  ui.draggable.appendTo($(this));

  $(this).sortable({
    tolerance: 'pointer',
receive: function (event, ui) {
  transferred = true;
}});
}});

---

这适用于

播放列表

容器中的大多数视频，但放入容器中的第一个视频会继承

videoResultsDiv

中的样式和功能，导致各种错误，包括重复。我尝试了各种各样的

var transfer

，将

connectToSortable

更改为

appendTo

（当前配置是我发现的唯一一种允许我将视频从

videoResultsDiv

拖动到外部

播放列表

容器中的配置），并删除

ui.helper

克隆，但所有这些都会引起一些问题。

答案是去掉可删除的代码，如以下JSFIDLE所示：

$('#sortable').sortable({
    receive: function(event, ui)
    {
        transferred = true;
    }
});