巧用 JavaScript 和 CSS，实现 HTML 中 li 标签拖动排序（附代码示例）

HTML本身并不支持直接实现拖动排序的功能，但我们可以使用JavaScript和CSS来实现这个功能。以下是一个简单的示例，使用JavaScript和HTML实现列表项（li）的拖动排序： HTML部分： ```html <ul id="sortable"> <li draggable="true">Item 1</li> <li draggable="true">Item 2</li> <li draggable="true">Item 3</li> <li draggable="true">Item 4</li> </ul> ``` CSS部分： ```css #sortable { list-style-type: none; } ``` JavaScript部分： ```javascript // 添加事件监听器，使得每个 li 可以被拖动 var dragSrcEl = null; var items = document.querySelectorAll('#sortable li'); Array.prototype.forEach.call(items, function(item) { item.addEventListener('dragstart', function(e) { // 保存被拖动的元素（li）的引用 dragSrcEl = e.target; // 防止默认的拖动行为 e.preventDefault(); }); }); // 添加事件监听器，当鼠标移动到其他元素上时，取消拖动效果 document.addEventListener('dragover', function(e) { e.preventDefault(); }); // 添加事件监听器，当鼠标释放时，更新元素的顺序并更新DOM结构 document.addEventListener('drop', function(e) { if (dragSrcEl !== e.target) { // 防止将其他元素作为目标放置文件的情况发生，只有当前元素被放置的元素才更新顺序并更新DOM结构 items[items.indexOf(dragSrcEl)].parentNode.removeChild(dragSrcEl); // 将拖动的元素从其父元素中移除并更新DOM结构 var dropIndex = Array.prototype.indexOf.call(e.target.querySelectorAll('li'), e.target); // 获取被放置元素的索引位置并更新顺序 items[dropIndex].appendChild(dragSrcEl); // 将拖动的元素添加到被放置元素的末尾并更新DOM结构 } e.preventDefault(); // 阻止默认的放置行为，如默认的文件处理行为等。在所有元素都可以被放置后，应该将此事件监听器移除。 }); ``` 注意：上述代码仅为示例，并未处理一些边缘情况，如：在拖动过程中触发了其他事件，或者被放置的元素无法接受其他元素。在实际应用中，需要根据具体情况进行调整和完善。这种方式对于用户体验的影响取决于浏览器是否允许直接在网页上进行拖放操作。在一些老旧的或者不允许的浏览器上可能无法工作。 ######[AI写代码神器 | 610点数解答 | 2023-11-16 22:48:35]