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 的宽度，使它们不比图像宽。