如何删除从列表中删除的项目？ [英] How to remove an item that is pulled away from it's list?
问题描述
这是一个简单的问题。我有一个'ul'，我通过jquery-ui的sortable（）函数对它进行了排序。我想删除列表中的元素。我实现它的方式工作的意义是，当我从列表中拖出一个元素时它会被删除，但是当我重新排列列表时它也会被删除。如何在没有这种意外行为的情况下实现我正在寻找的行为。以下是所有代码：
here is a simple question. I have a 'ul' which i have made sortable via jquery-ui's sortable() function. I want to remove elements when they are dragged off the list. The way i have it implemented works in the sense that when i drag an element away from the list it gets removed, but it also gets removed when i just rearrange the list. How do i achieve the behavior i am looking for without this unintended behavior. Below is all the code:
<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>
感谢您的帮助！
推荐答案
您可以尝试使用变量来检查您拖动的项目是否被拖出其父容器。
You could try to use a variable to check if the items you are dragging is dragged out of its parent container.
您可以使用jQuery UI可排序的 over 和 out 事件来为此变量分配值，然后在 beforeStop 事件。
You can use the over and out events of the jQuery UI sortable to assign the value for this variable and then execute the removal of the dragged item on the beforeStop event.
这是我想出的一个演示： http://jsfiddle.net/drewP/m7VJq/1/
here is a demo of what I have come up with: http://jsfiddle.net/drewP/m7VJq/1/
让我知道它是否适合您。
let me know if it works for you.
这篇关于如何删除从列表中删除的项目？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
