jQuery UI 可排序删除项目不起作用

Question

我已经集成了jQuery UI 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'
});

$('.droppableArea').droppable({
    accept: 'li',
    drop: function(event, ui) {
        ui.helper.remove();
    }
});
});

我不确定我是否解释清楚，但是 jsfiddle 是如何工作的。

如您所见，效果很好。

我已经在我的网站上实现了这个以及其他一些 jQuery 插件，比如 "jquery-menu-aim" 当您将鼠标悬停在菜单项上时显示子菜单。我已经用我的“#sidebar-wrapper”更改了“.droppableArea”类，但没有工作。

当我尝试将项目放入侧边栏包装器时，它不会将其从可排序列表中删除。

这是我正在尝试做的jsfiddle。

将鼠标悬停在“标题”上，然后将其中一张图片拖到显示的位置 悬停“标题”并在此处放置图像，然后尝试将图像从那里拖到侧边栏包装器中，您会看到图像没有被删除。

有什么想法可能是错的吗？

Answer 1

这是因为 Sortable LI 的宽度足够宽，当您将其拖到侧边栏包装器时，jQuery UI 仍然认为您正在尝试排序。要查看这种情况，请添加以下 CSS

.sortableList li {
   width:150px;
}

您需要调整 sortables 的宽度，使其不比图像宽。