拖放排序是一种常见的交互方式，可以让用户通过拖动元素来改变它们的顺序。下面是一种简单的实现方法：
首先需要准备一个ul列表，每个li元素代表一个可拖动的项：
<ul id="sortable">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
实现拖放排序功能的核心代码如下：
// 获取可拖动的元素列表
const sortableList = document.getElementById('sortable');
const sortableItems = sortableList.querySelectorAll('li');
// 给每个可拖动的元素添加拖动事件
sortableItems.forEach(item => {
item.draggable = true;
item.addEventListener('dragstart', dragstart_handler);
item.addEventListener('dragover', dragover_handler);
item.addEventListener('drop', drop_handler);
});
// 记录被拖动的元素和目标位置的索引
let draggedIndex = 0;
let targetIndex = 0;
function dragstart_handler(e) {
draggedIndex = Array.from(sortableItems).indexOf(this);
e.dataTransfer.setData('text/plain', draggedIndex);
}
function dragover_handler(e) {
e.preventDefault();
targetIndex = Array.from(sortableItems).indexOf(this);
if (draggedIndex < targetIndex) {
this.parentNode.insertBefore(sortableItems[draggedIndex], this.nextSibling);
} else {
this.parentNode.insertBefore(sortableItems[draggedIndex], this);
}
}
function drop_handler(e) {
e.preventDefault();
}
首先通过document.getElementById获取到ul元素，再通过querySelectorAll获取到所有可拖动的li元素。
给每个li元素添加dragstart、dragover和drop事件监听器，分别对应拖动开始、拖动过程和拖动结束。
在dragstart事件中记录被拖动的元素的索引，并使用setData方法将其存储到dataTransfer对象中。
在dragover事件中阻止默认行为，并记录目标位置的索引。根据被拖动元素和目标位置的索引，使用insertBefore方法将被拖动的元素插入到目标位置前面或后面。
在drop事件中阻止默认行为，这样可以避免一些浏览器在拖放时的默认行为。