我有以下场景。我有一个很长的列列表,它们由两个特定的<ul>
列表中的<li>
对象表示。左侧是用户可以选择的所有字段。在右侧,是用户从左侧拖放所需字段的位置。从本质上讲,此场景用于为动态报表构建列的有序列表。
使用JQueryUISortable()
方法,我很容易地创建了用于根据需要拖放这些列<li>
元素的列表。当将内容从左列表拖动到右列表时,一切都很完美,因为我希望我的用户能够为他们的报告排序列。
但是,如果用户将项目从右侧列表拖到左侧,(例如,他们决定不包括之前添加的列)我想将该项目添加回左侧的Sortable()
列表,但我希望它被放置在特定的、预先排序的位置,而不是位于该列所在的元素下方。
满足这种需求的最佳方法是什么?我应该为左侧列容器使用JQueryUI Sortable()
对象,并在数据被丢弃时使用它,还是有更好的JQuery工具来完成作业?如果我应该将左侧列表定义为Sortable()
对象,我应该如何修改它,以便在删除操作完成后正确地重新排列列表?
这是一个JSFiddle,我用它来实现这些列表的基本机制。再一次,右边的名单正按照我的意愿行事。但是,我希望左手边总是根据用于强制排序的值进行排序。对于本例的情况,左侧应始终根据每个<li>
上定义的data-sort
属性进行排序。
您可以根据特定的data-sort
属性对#left-list
中所有丢弃的项目进行排序。您必须使用update
回调,它在每次更新时都会触发,而不是stop
回调。
$("#left-side").sortable({
connectWith: "#right-side",
update: function(e, info) {
$(this).children('li').sort(function(a, b) {
return +a.dataset.sort - +b.dataset.sort;
}).appendTo(this);
}
});
$("#right-side").sortable({
connectWith: "#left-side"
});
// code to set relevant data-sort attribute for each LIs
$("#left-side, #right-side").find('li').attr('data-sort', function() {
return $(this).index('body ul.ui-sortable li');
});
ul {
border: 1px solid Black;
width: 200px;
height: 200px;
display: inline-block;
vertical-align: top;
}
li {
background-color: Azure;
border-bottom: 1px dotted Gray
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.8.18/jquery-ui.min.js"></script>
<h1>Click items to select them</h1>
<ul id="left-side">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
<ul id="right-side">
<li>Four</li>
<li>Five
</li>
<li>Six</li>
</ul>