html5 li 拖拽

原创

mob649e815bbe69 2024-06-01 05:02:07 ©著作权

©著作权归作者所有：来自51CTO博客作者mob649e815bbe69的原创作品，请联系作者获取转载授权，否则将追究法律责任

HTML5中的li拖拽

在网页开发中，拖拽功能是一个非常常见的需求。通过拖拽，用户可以方便地调整元素的位置或者实现元素的交互。在HTML5中，我们可以利用拖拽API来实现对li元素的拖拽功能。本文将介绍如何利用HTML5和JavaScript来实现li元素的拖拽功能，并提供相应的代码示例。

拖拽功能的基本原理

在HTML5中，拖拽功能主要依赖于draggable属性和相关的事件。通过将元素的draggable属性设置为true，我们可以让该元素成为可拖拽的。当我们拖拽一个元素时，会触发一系列的拖拽事件，如dragstart、drag和dragend等。利用这些事件，我们可以实现对元素的拖拽操作。

实现li元素的拖拽功能

下面我们将演示如何实现对li元素的拖拽功能。首先，我们需要准备一个包含多个li元素的列表，并将这些li元素设置为可拖拽的。然后，我们需要在相应的事件处理函数中编写逻辑来处理拖拽操作。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Li Drag and Drop</title>
<style>
ul {
    list-style-type: none;
    padding: 0;
}

li {
    padding: 10px;
    margin: 5px;
    background-color: #f0f0f0;
    cursor: move;
}
</style>
</head>
<body>
<ul id="list">
    <li draggable="true">Item 1</li>
    <li draggable="true">Item 2</li>
    <li draggable="true">Item 3</li>
</ul>

<script>
const list = document.getElementById('list');
let draggedItem = null;

list.addEventListener('dragstart', (event) => {
    draggedItem = event.target;
    setTimeout(() => {
        event.target.style.display = 'none';
    }, 0);
});

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

list.addEventListener('drop', (event) => {
    if (event.target.tagName === 'LI') {
        event.target.parentNode.insertBefore(draggedItem, event.target);
    } else {
        list.appendChild(draggedItem);
    }
    draggedItem.style.display = 'block';
    draggedItem = null;
});
</script>
</body>
</html>

在上面的例子中，我们创建了一个包含三个li元素的列表。当用户拖拽其中一个li元素时，我们将其保存到draggedItem变量中，并在dragstart事件中隐藏原始元素。在dragover事件中阻止默认行为，确保drop事件能够被正确触发。最后，在drop事件中，我们将拖拽的元素插入到目标位置，并显示出来。