用 HTML 代码轻松实现 li 标签拖动排序，附完整示例！

要实现li标签的拖动排序，可以使用HTML5的拖放（Drag and Drop）API。以下是一个简单的示例： ```html <!DOCTYPE html> <html> <head> <style> #div1 { width: 350px; height: 100px; padding: 10px; border: 1px solid #aaaaaa; } </style> <script> function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData("text", ev.target.id); } function drop(ev) { ev.preventDefault(); var data = ev.dataTransfer.getData("text"); ev.target.appendChild(document.getElementById(data)); } </script> </head> <body> <h2>Drag and Drop Demo</h2> <p>Drag the list items up and down to rearrange them.</p> <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"> <ul> <li draggable="true" ondragstart="drag(event)">Item 1</li> <li draggable="true" ondragstart="drag(event)">Item 2</li> <li draggable="true" ondragstart="drag(event)">Item 3</li> </ul> </div> </body> </html> ``` 在这个示例中，我们首先定义了一个允许拖放的div，并在其中创建了一个包含三个li元素的无序列表。每个li元素都有一个draggable属性，表示它可以被拖动。然后，我们为每个li元素添加了ondragstart事件处理器，该处理器会在开始拖动时调用drag函数。这个函数将被拖动元素的id作为数据附着到拖动操作上。接下来，我们在div元素上添加了ondrop和ondragover事件处理器。ondragover处理器调用allowDrop函数，阻止浏览器的默认处理方式（通常是在新位置打开链接或复制文本）。ondrop处理器调用drop函数，它会获取被拖动元素的id，然后将其移动到新的位置。这样就实现了一个简单的li标签拖动排序功能。 ######[AI写代码神器 | 451点数解答 | 2023-11-16 23:01:44]

服务商

更多选项

快捷项

自定义