以下是一个使用JavaScript实现拖拽排序的示例代码:

HTML部分:
html

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5

JavaScript部分:
javascript
const sortableList = document.getElementById('sortable');

let draggedItem = null;

sortableList.addEventListener('dragstart', function(e) {
draggedItem = e.target;
e.target.style.opacity = '0.5';
});

sortableList.addEventListener('dragend', function(e) {
e.target.style.opacity = '1';
});

sortableList.addEventListener('dragover', function(e) {
e.preventDefault();
});

sortableList.addEventListener('dragenter', function(e) {
if (e.target.tagName === 'LI') {
e.target.style.border = '2px dashed #000';
}
});

sortableList.addEventListener('dragleave', function(e) {
if (e.target.tagName === 'LI') {
e.target.style.border = '';
}
});

sortableList.addEventListener('drop', function(e) {
e.preventDefault();
if (e.target.tagName === 'LI') {
e.target.style.border = '';
sortableList.insertBefore(draggedItem, e.target);
}
});

这段代码是一个简单的拖拽排序实现,当用户拖动其中一个`

  • `元素时,它的`dragstart`事件将被触发,我们设置`draggedItem`变量为当前被拖动的元素,并将其透明度设置为0.5。在元素拖动结束时,`dragend`事件将被触发,我们将元素的透明度设置回1。

    在`

      `元素上,我们监听了`dragover`、`dragenter`、`dragleave`和`drop`事件。`dragover`事件的默认行为是不允许元素放置,所以我们需要调用`preventDefault()`方法来允许放置。在`dragenter`和`dragleave`事件中,我们将鼠标进入和离开的元素的边框样式设置为虚线来提供视觉反馈。

      最后,在`drop`事件中,我们检查鼠标放置的目标元素是否是`

    • `元素并将其边框样式重置,然后使用`insertBefore()`方法将被拖动的元素插入到目标元素之前,实现排序效果。

      请注意,上述代码仅实现了拖拽排序的基本功能,你可以根据需要进行自定义和扩展。