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;
}

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