如何删除从列表中拖出来的项目?

13

这里有一个简单的问题。我有一个“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>

感谢您的帮助!

2个回答

25

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

您可以使用jQuery UI sortable的 over out 事件为此变量分配值,然后在 beforeStop 事件上执行删除拖动的项目。

这是我想出的演示: http://jsfiddle.net/drewP/m7VJq/1/

请告诉我它是否适用于您。


我忘记了over/out。谢谢Drew!:-D - Fallenreaper
这太棒了!拯救了一天,Drew! :) - cbloss793

0
我相信有不止一种正确的方法来做到这一点,但如果我必须这样做,我可能会使用一个包装元素作为可放置的元素。为什么不使用主站容器,那个万能的 #wrapper!绑定到可放置元素的 drop 事件,并完全移除该项。它也不会保留在可排序列表中。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接