要实现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标签拖动排序功能。 [2023-11-16 23:01:44 | AI写代码神器 | 451点数解答]