我使用jquery为用户提供一个可重新排列的项目列表。这样地:
列表的图像
下面是简单的html:
<ul class="sortable">
<li>Item 1<i class="sorthandle"></i></li>
<li>Item 2<i class="sorthandle"></i></li>
</ul>
拖放功能非常有效。下一步是将用户的排序首选项保存到数据库中。我计划在数据库中添加一个“priority”列,其中包含一个表示用户首选排序顺序的整数。那么我的问题就解决了 Order by 'priority' ASC
.
我想我需要生成一个当前在拖放屏幕上显示的排序顺序数组,然后将这些值保存到数据库记录中。但是作为一个javascript新手,我需要一些帮助。
我的javascript
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function() {
$(".sortable").sortable({
connectWith: ".sortable",
handle: '.handle'
}).disableSelection();
});
</script>
通过php生成拖放列表:
while ($row = mysqli_fetch_array($result)){
$playlistname = $row['name'];
$id = $row['id'];
echo "<li>$playlistname<i class='handle fa fa-bars'></i></li>";
}
2条答案
按热度按时间vhipe2zx1#
我不需要再写javascript就可以完成这个任务。php工作得很好!
php-获取值
保存/提交时处理
eagi6jfj2#
首先,javascript需要id,而不仅仅是名称。您可以简单地将它们放在一个数据属性中(我还去掉了不必要的变量赋值,并使用串联构建了字符串)
然后可以在javascript中提取这个数据属性并创建一个数组。您可能需要考虑何时保存设置。最简单的方法是提供一个按钮。也可以在sortable update事件上执行此操作(例如,在“删除”元素之后)。但这是有风险的,可能会使服务器过载。
要在单击按钮时触发ajax post,请将此代码放在
$(function() {
. 它将lambda函数绑定到click
id为的dom元素的事件save
,f.ex。<button id="save">save order</button>
```// bind a callback to the button click
$('#save').on('click', function () {
// array where we store the IDs
var ids = [];
// loop through the and extract data-id
$('.sortable li').each(function() {
ids.push($(this).data('id'));
});
});