列表拖拽改变顺序
时间: 2023-07-06 16:03:44 浏览: 69
实现列表拖拽改变顺序的方式有很多,下面我介绍一种常见的实现方法:
1. 给每个列表项添加一个可拖拽属性,例如 `draggable="true"`。
2. 监听列表项的 `dragstart` 事件,在该事件的处理函数中保存被拖拽项的索引。
3. 监听列表的 `dragover` 事件,阻止默认行为并给被拖拽项的位置添加一个特殊的类名以表示拖拽的位置。
4. 监听列表的 `drop` 事件,获取被拖拽项的索引和拖拽位置的索引,并根据这两个索引来交换两个列表项的位置。
5. 监听列表项的 `dragend` 事件,在该事件的处理函数中移除特殊的类名。
下面是一个简单的示例代码:
HTML:
```html
<ul id="list">
<li draggable="true">Item 1</li>
<li draggable="true">Item 2</li>
<li draggable="true">Item 3</li>
<li draggable="true">Item 4</li>
<li draggable="true">Item 5</li>
</ul>
```
JavaScript:
```javascript
const list = document.getElementById('list');
let dragIndex = null;
function handleDragStart(e) {
dragIndex = Array.from(list.children).indexOf(e.target);
}
function handleDragOver(e) {
e.preventDefault();
const target = e.target.closest('li');
if (target && target !== list.children[dragIndex]) {
target.classList.add('drag-over');
}
}
function handleDragLeave(e) {
const target = e.target.closest('li');
if (target && target !== list.children[dragIndex]) {
target.classList.remove('drag-over');
}
}
function handleDrop(e) {
e.preventDefault();
const target = e.target.closest('li');
if (target && target !== list.children[dragIndex]) {
const dropIndex = Array.from(list.children).indexOf(target);
list.insertBefore(list.children[dragIndex], dropIndex > dragIndex ? target.nextSibling : target);
}
list.querySelectorAll('.drag-over').forEach(item => item.classList.remove('drag-over'));
}
function handleDragEnd(e) {
dragIndex = null;
}
list.addEventListener('dragstart', handleDragStart);
list.addEventListener('dragover', handleDragOver);
list.addEventListener('dragleave', handleDragLeave);
list.addEventListener('drop', handleDrop);
list.addEventListener('dragend', handleDragEnd);
```
CSS:
```css
li.drag-over {
background-color: #eee;
}
```
这样就实现了一个简单的列表拖拽改变顺序的功能。