Sortable.js板块拖拽示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sortable.js 示例</title>
<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.14.0/Sortable.min.js"></script>
</head>
<body>
<ul id="items">
<li>项目 1</li>
<li>项目 2</li>
<li>项目 3</li>
</ul>
<script>
// 获取列表元素
var el = document.getElementById('items');
// 创建 Sortable 对象
var sortable = new Sortable(el, {
animation: 150, // 动画持续时间
ghostClass: 'blue-background-class' // 设置幻影元素的类
});
</script>
<style>
.blue-background-class {
background: lightblue;
}
</style>
</body>
</html>这段代码演示了如何使用Sortable.js创建一个可拖拽排序的列表。在HTML中，我们定义了一个ID为items的无序列表，并通过JavaScript引入了Sortable.js库，并初始化了一个Sortable实例，可以对列表中的项进行拖拽排序。通过animation属性设置了动画效果，并通过ghostClass属性定制了拖拽项的样式。
评论已关闭