基于HTML5 drag/drop模块的拖动插入排序删除的完整实例

首先，我们需要创建一个HTML页面，并添加必要的元素和样式。这个页面将包含一个列表，其中的每一项都可以拖动和删除。示例的HTML代码如下：

html 复制代码

<!DOCTYPE html>
<html>
<head>
    <title>Drag and Drop Sortable List</title>
    <style>
        .sortable-list {
            list-style-type: none;
            padding: 0;
            margin: 20px 0;
            border: 1px solid #ccc;
            width: 300px;
        }
        .sortable-list li {
            padding: 10px;
            background-color: #f9f9f9;
            border-bottom: 1px solid #ccc;
            cursor: move;
        }
        .sortable-list .dragging {
            opacity: 0.5;
        }
        .sortable-list .deleting {
            background-color: #ffcccc;
        }
    </style>
</head>
<body>
    <ul id="sortableList" class="sortable-list">
        <li draggable="true">Item 1</li>
        <li draggable="true">Item 2</li>
        <li draggable="true">Item 3</li>
        <li draggable="true">Item 4</li>
        <li draggable="true">Item 5</li>
    </ul>

    <script src="script.js"></script>
</body>
</html>

在上面的HTML代码中，我们创建了一个有序列表（id为sortableList）作为拖放容器，并在其中添加了一些可拖动的项目。列表项具有draggable属性，以将其标记为可拖动。

接下来，我们需要编写JavaScript代码来实现拖放逻辑和排序删除功能。示例的JavaScript代码如下所示（保存为script.js文件）：

javascript 复制代码

var sortableList = document.getElementById('sortableList');
var draggingElement = null;

// 监听拖动事件
sortableList.addEventListener('dragstart', function(event) {
    draggingElement = event.target; // 保存当前拖动的元素
    event.dataTransfer.effectAllowed = 'move';
    event.dataTransfer.setData('text/html', draggingElement.innerHTML);
    draggingElement.classList.add('dragging');
});

sortableList.addEventListener('dragover', function(event) {
    event.preventDefault();
    event.dataTransfer.dropEffect = 'move';
});

sortableList.addEventListener('dragenter', function(event) {
    event.target.classList.add('deleting');
});

sortableList.addEventListener('dragleave', function(event) {
    event.target.classList.remove('deleting');
});

sortableList.addEventListener('drop', function(event) {
    event.preventDefault();

    var targetElement = event.target;
    while (targetElement !== sortableList) {
        if (targetElement.tagName === 'LI') {
            break;
        }
        targetElement = targetElement.parentNode;
    }

    targetElement.classList.remove('deleting');

    if (targetElement && targetElement !== draggingElement) {
        var items = Array.from(sortableList.children);
        var draggingIndex = items.indexOf(draggingElement);
        var targetIndex = items.indexOf(targetElement);

        if (draggingIndex > targetIndex) {
            sortableList.insertBefore(draggingElement, targetElement);
        } else {
            sortableList.insertBefore(draggingElement, targetElement.nextSibling);
        }
    }

    draggingElement.classList.remove('dragging');
});

sortableList.addEventListener('dragend', function(event) {
    draggingElement.classList.remove('dragging');
});

// 监听删除事件
sortableList.addEventListener('click', function(event) {
    var targetElement = event.target;
    if (targetElement.tagName === 'LI') {
        targetElement.parentNode.removeChild(targetElement);
    }
});

在上面的JavaScript代码中，我们首先获取了拖放容器sortableList和当前正在拖动的元素draggingElement。然后，我们监听了拖动事件（dragstart、dragover、dragenter、dragleave、drop和dragend）来实现拖放逻辑。当拖动开始时（dragstart），我们保存了当前拖动的元素，并给它添加一个样式类（dragging）。当元素被拖动到其他位置时，我们使用dragover、dragenter和dragleave事件来处理插入排序的逻辑，并给目标位置添加或移除相应的样式类。最后，当元素被放置（drop）或拖动结束（dragend）时，我们将元素移动到正确的位置并去除样式类。

另外，我们还监听了点击事件（click）来实现删除功能。当点击列表项时，我们从DOM中移除该项。

当使用HTML5的Drag/Drop模块来实现拖动、插入排序和删除功能时，还有一些其他方面需要考虑。

支持移动端触摸事件：除了监听鼠标事件外，在移动设备上我们还可以监听触摸事件来实现拖放功能。可以通过添加touchstart、touchmove和touchend事件来处理触摸事件，并对应调整拖动过程中元素的位置。例如：

javascript 复制代码

sortableList.addEventListener('touchstart', function(event) {
    // 处理触摸开始事件
});

sortableList.addEventListener('touchmove', function(event) {
    // 处理触摸移动事件
});

sortableList.addEventListener('touchend', function(event) {
    // 处理触摸结束事件
});

持久化排序顺序：如果你希望在页面刷新后仍然保持排序顺序，你可以将排序后的列表项的顺序保存到本地存储或后台数据库中。这样，当用户重新加载页面时，你可以从存储中获取顺序数据，并将列表项按照这个顺序重新渲染。
动画效果：为了使拖动和插入排序更加流畅，你可以考虑为元素的移动添加动画效果。可以使用CSS的transition属性或JavaScript的动画库（如Tween.js）来实现平滑的过渡效果。在拖动开始时启用动画，在拖动结束后关闭动画。
错误处理和边界情况：在实际应用中，可能会遇到一些特殊情况和错误操作。例如，拖动过程中鼠标或触摸事件被取消，或者目标容器不能接受拖放的元素等。你需要根据具体需求来处理这些情况，并给用户提供适当的反馈和错误提示。
可访问性支持：为了确保你的应用对于使用辅助技术的用户也能够正常使用，可以考虑添加适当的可访问性支持。这包括为拖放元素添加键盘焦点、为拖动过程添加相应的ARIA属性、使用语义化的标记等。