在两个<ul> JS之间拖动<li> (不带jQuery)

在两个<ul>元素之间拖动<li>元素（不使用jQuery）涉及到HTML5的拖放API。以下是实现这一功能的基础概念、优势、类型、应用场景以及具体的实现步骤和示例代码。

基础概念

拖放API：HTML5提供了拖放API，允许用户在网页上拖动元素并将其放置到另一个位置。
事件监听：通过监听dragstart、dragover、drop等事件来实现拖放功能。

优势

用户体验：提升用户交互体验，使操作更加直观和便捷。
灵活性：可以自定义拖放行为，适应不同的应用场景。
兼容性：现代浏览器普遍支持HTML5拖放API。

类型

内部拖放：在同一页面内的元素之间进行拖放。
跨页面拖放：在不同页面之间进行拖放（较少见）。

应用场景

列表排序：如待办事项列表、文件管理器等。
内容编辑器：在富文本编辑器中移动段落或图片。
游戏开发：在游戏中实现物体的拖放效果。

实现步骤和示例代码

以下是一个简单的示例，展示如何在两个<ul>元素之间拖动<li>元素：

<!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 List</title>
    <style>
        ul {
            list-style-type: none;
            padding: 0;
            margin: 10px;
            border: 1px solid #ccc;
            width: 200px;
        }
        li {
            padding: 10px;
            border-bottom: 1px solid #eee;
            cursor: grab;
        }
        li:active {
            cursor: grabbing;
        }
    </style>
</head>
<body>
    <ul id="list1">
        <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>
    <ul id="list2">
        <li draggable="true" ondragstart="drag(event)">Item 4</li>
        <li draggable="true" ondragstart="drag(event)">Item 5</li>
        <li draggable="true" ondragstart="drag(event)">Item 6</li>
    </ul>

    <script>
        function drag(ev) {
            ev.dataTransfer.setData("text", ev.target.id);
        }

        document.addEventListener('dragover', (event) => {
            event.preventDefault();
        });

        document.addEventListener('drop', (event) => {
            event.preventDefault();
            const data = event.dataTransfer.getData("text");
            const draggedElement = document.getElementById(data);
            const dropTarget = event.target.closest('ul');
            if (dropTarget && dropTarget !== draggedElement.parentNode) {
                dropTarget.appendChild(draggedElement);
            }
        });
    </script>
</body>
</html>

解释

HTML结构：两个<ul>列表，每个<li>元素都设置了draggable="true"属性。
CSS样式：简单的样式使列表看起来更美观，并设置拖动时的鼠标样式。
JavaScript逻辑：
- drag函数：在拖动开始时，将当前元素的ID存储到dataTransfer对象中。
- dragover事件：阻止默认行为以允许放置。
- drop事件：获取拖动的元素并将其添加到目标<ul>中。