Question

这是一个简单的问题。我有一个'ul'，我通过jquery-ui的sortable（）函数对它进行了排序。我想删除列表中的元素。我实现它的方式工作的意义是，当我从列表中拖出一个元素时它会被删除，但是当我重新排列列表时它也会被删除。如何在没有这种意外行为的情况下实现我正在寻找的行为。以下是所有代码：

<html>
<head>
    <link type="text/css" href="jquery-ui/css/ui-lightness/jquery-ui-1.8.17.custom.css" rel="Stylesheet" /> 
    <script type="text/javascript" src="jquery-ui/js/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="jquery-ui/js/jquery-ui-1.8.17.custom.min.js"></script>

    <script type="text/javascript">
    $(function(){
        $('#sortme').sortable({
            out: function(event, ui){
                ui.item.remove();
            }
        });
        $('#sortme').disableSelection();
    });
    </script>

    <style>
    li{
        list-style-type: none;
        width: 200px;
        height: 50px;
        border: 1px solid #000;
        text-align: center;
        box-sizing: border-box;
        padding-top: 15px;
    }
    </style>
    <title> jqui sort test </title>

</head>
<body>
    <ul id='sortme'>
        <li>0</li>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
    </ul>
</body>
</html>

感谢您的帮助！

Answer 1

您可以尝试使用变量来检查您拖动的项目是否被拖出其父容器。

您可以使用jQuery UI可排序的 over 和 out 事件来为此变量分配值，然后在 beforeStop 事件。

这是我提出的一个演示：http://jsfiddle.net/drewP/m7VJq/1/

让我知道它是否适合你。

Answer 2

我确信有多种正确的方法可以做到这一点，但如果我必须这样做，我可能会使用一个包装元素作为droppable。为什么不是主站点容器，全能#wrapper！绑定到droppable的drop事件并完全删除该项目。它也不会保持可分类。

如何删除从列表中删除的项目？

2 个答案: