相当流畅的js拖拽排序实现

以下是一个使用JavaScript实现的相对较流畅的拖拽排序功能的示例代码：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Drag and Drop Sort</title>
<style>
    #sortable {
        list-style-type: none;
        padding: 0;
        margin: 0;
    }
    #sortable li {
        margin: 5px;
        padding: 5px;
        border: 1px solid #ddd;
        background-color: #f9f9f9;
        cursor: move;
    }
</style>
</head>
<body>
 
<ul id="sortable">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
</ul>
 
<script>
function dragStart(event) {
    event.dataTransfer.setData("text/plain", event.target.id);
}
 
function allowDrop(event) {
    event.preventDefault();
}
 
function dragOver(event) {
    event.preventDefault(); // Prevent default to allow drop
}
 
function drop(event) {
    event.preventDefault();
    const data = event.dataTransfer.getData("text");
    const draggedElement = document.getElementById(data);
    const dropZone = event.target;
    // Move dragged element to the selected drop zone
    dropZone.appendChild(draggedElement);
    const draggedItems = document.querySelectorAll('.draggableItem');
    const dropZoneItems = [...dropZone.parentNode.children].filter(el => el !== dropZone);
    const allItems = [...draggedItems, ...dropZoneItems];
    allItems.forEach((el, i) => el.setAttribute('data-order', i));
}
 
const draggableItems = document.querySelectorAll('.draggableItem');
draggableItems.forEach(item => {
    item.draggable = true;
    item.addEventListener('dragstart', dragStart);
    item.setAttribute('data-order', draggableItems.indexOf(item));
});
 
const dropZones = document.querySelectorAll('.dropZone');
dropZones.forEach(zone => {
    zone.addEventListener('dragover', dragOver);
    zone.addEventListener('drop', drop);
});
</script>
 
</body>
</html>

这段代码实现了一个简单的拖拽排序功能。用户可以点击并拖动列表中的项目来重新排列它们。代码使用了HTML、CSS和JavaScript，并且尽可能保持简洁。通过设置元素的draggable属性为true，并实现了一系列的拖拽事件处理函数，可以实现拖拽效果。这个实现允许用户将列表项放置到列表中的任何位置，并在放置时更新它们的顺序。

相当流畅的js拖拽排序实现

评论已关闭

推荐阅读