如何删除从其列表中拉出的项目

How to remove an item that is pulled away from it's list?

本文关键字：列表 项目 何删除 删除      更新时间：2023-09-26

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

感谢您的帮助！

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

您可以使用 jQuery UI 可排序的 over 和 out 事件来分配此变量的值，然后在 beforeStop 事件上执行拖动项的删除。

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

让我知道它是否适合您。

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

相关文章：