Question

我已经整合jQuery UI sortable并且我已经创建了一个＆＃34;可拖动的＆＃34;物品清单，＆＃34;可排序＆＃34;项目列表和＆＃34; droppable＆＃34;列出如果我放弃＆＃34;可排序＆＃34;列出它删除它们。

这里的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"。我已经改变了＆＃34;。droppableArea＆＃34;用我的＆＃34;＃sidebar-wrapper＆＃34;但是没有用。

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

这是我尝试做的jsfiddle。

将鼠标悬停在＆＃34; Headers＆＃34;然后将其中一个图像拖到它所说的位置 HOVER＆＃34; HEADERS＆＃34;并在此处删除图像，然后尝试将图像从那里拖动到侧边栏包装中，您将看到图像未被删除。

任何想法可能出错？

Answer 1

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

.sortableList li {
   width:150px;
}

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

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

1 个答案: