列表拖拽排序功能
Posted xiaoyaoxingchen
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了列表拖拽排序功能相关的知识，希望对你有一定的参考价值。
前几天在做项目的时候，遇到一个表格里边的数据通过上下拖拽来改变其排序方式，后来通过一阵查找，发现jquery-ui提供了sortable这个方法，甚是欢喜，在此便把我写的小demo奉上：
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>拖拽排序</title> <!-- <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> --> <!-- <link rel="stylesheet" href="/resources/demos/style.css"> --> <style> #sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; border: 1px solid red; } #sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; } #sortable li span { position: absolute; margin-left: -1.3em; } </style> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <script> $(function () { $("#sortable").sortable({ axis: "y", // y方向拖动 containment: "parent", // 约束范围为父元素内部 cursor: "move", cursorAt: { left: 5 }, // disabled: true, distance: 5, update: updateHandle }); // $( "#sortable" ).disableSelection(); var arr = []; function updateHandle() { arr=[]; Array.prototype.slice.call($(‘ul li‘)).forEach(function (element, index) { arr.push(element.dataset.id) }); console.log(arr.join(‘,‘)); } }); </script> </head> <body> <ul id="sortable"> <li class="ui-state-default" data-id="1">Item 1</li> <li class="ui-state-default" data-id="2">Item 2</li> <li class="ui-state-default" data-id="3">Item 3</li> <li class="ui-state-default" data-id="4">Item 4</li> <li class="ui-state-default" data-id="5">Item 5</li> <li class="ui-state-default" data-id="6">Item 6</li> <li class="ui-state-default" data-id="7">Item 7</li> <li class="ui-state-default" data-id="8">Item 8</li> <li class="ui-state-default" data-id="9">Item 9</li> </ul> </body> </html>
其文档地址为：http://api.jqueryui.com/sortable/#entry-examples
以上是关于列表拖拽排序功能的主要内容，如果未能解决你的问题，请参考以下文章