jquery插件——拖拽自动排序
2021-09-12 本文已影响0人
MC桥默
前言
本插件主要应用于文字列表拖拽后自动排序，应用于ol或ul标签下。
步骤
css样式
body.dragging, body.dragging * {
cursor: move !important;
}
.dragged {
position: absolute;
opacity: 0.5;
z-index: 2000;
}
ol.example li.placeholder {
position: relative;
/** More li styles **/
}
ol.example li.placeholder:before {
position: absolute;
/** Define arrowhead **/
}
html
<ol class='example'>
<li>First</li>
<li>Second</li>
<li>Third</li>
</ol>
js
$(function () {
$("ol.example").sortable()
})
完整实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="jquery-sortable.js"></script>
<title>drag</title>
<style>
body.dragging, body.dragging * {
cursor: move !important;
}
.dragged {
position: absolute;
opacity: 0.5;
z-index: 2000;
}
ol.example li.placeholder {
position: relative;
/** More li styles **/
}
ol.example li.placeholder:before {
position: absolute;
/** Define arrowhead **/
}
</style>
</head>
<body>
<h3>点击下方拖拽排序</h3>
<ol class='example'>
<li>First</li>
<li>Second</li>
<li>Third</li>
<li>strongly</li>
<li>three</li>
<li>three</li>
</ol>
<script>
$(function () {
$("ol.example").sortable()
})
</script>
</body>
</html>
