掌握HTML5拖放(Drag & Drop)：构建交互式元素移动体验

Virtual09
959 阅读4分钟

前言

     今天本文给大家带来一个Html5中一个非常有意思的东西 —— html5中的拖拽功能

44931b782f843ac598db68de52d72771.png

在这个例子中，页面上有一个绿色的可拖动元素和多个空容器，用户可以将绿色方块拖动到任意一个空容器内。

正文

     我们先来写好前期工作

<body>
    <div class="empty">
        <div class="fill" draggable="true"></div>
    </div>
    <div class="empty"></div>
    <div class="empty"></div>
    <div class="empty"></div>
    <div class="empty"></div>
</body>

我们先定义好五个一样的空盒子，但是一个盒子我们默认是可以移动的，默认可以移动是由代码draggable="true"带来的效果(draggable="true" 这段代码是在HTML元素上设置的一个属性，它启用了HTML5的拖放（Drag and Drop）功能。)在我们执行拖放操作时，有几个关键的事件我们可以触发,dragstart当拖动时触发,dragend当拖动结束时触发,dragover当拖动元素位于目标元素上方时触发,dragenter当拖动元素首次进入目标元素边界时触发,dragleave当拖动的元素离开目标元素边界时触发,drop当元素在目标元素上释放时触发。我们可以通过这些事件，来控制盒子的拖拽问题。 现在我们给盒子配一下css样式

* {
        box-sizing: border-box;
    }
    body {
        background-color: steelblue;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100vh;
        overflow: hidden;
        margin: 0;
    }
    .empty {
        height: 150px;
        width: 150px;
        margin: 10px;
        border: 3px solid black;
        background: white;
    }
    .fill {
        width: 145px;
        height: 145px;
        cursor: pointer;
        background-color: green;
        background-image:url("https://source.unsplash.com/random/150x150");
    }
    .hold {
        border:5px solid #ccc;
    }
    .hovered {
        background-color: #333;
        border-color:white;
        border-style: dashed;
    }
    </style>
  • * 选择器设置所有元素的box-sizing为border-box。
  • body 设置背景颜色、显示方式、居中对齐、高度、我们使用overflow设置了超出则隐藏。
  • .empty 和 .fill 分别设置了容器和可拖动元素的样式，cursor: pointer当我们鼠标悬浮在可拖动的盒子上时，鼠标光标的样式会被修改。
  • .hold 和 .hovered 是动态添加的类，用于改变元素状态时的样式, border-style: dashed当被选中的盒子悬浮在一个空白盒子上方或者说当被选中的盒子进入一个未被选中的盒子时会将元素的边框样式设置为虚线。

现在我们就该实现让页面中的盒子交互起来。让页面的盒子可以交互，首先我们得获取到一点'哪一个盒子可以动以及哪些是空盒子吧'，所以我们使用document.querySelector()获取带可移动的盒子以及空盒子。然后我们对可移动的盒子fill进行事件监听，一个是拖拽刚开始时以及拖拽结束时，我们长摁鼠标不松手，就可以拖拽选中目标了，多以我们要给被选中的盒子添加一个hold属性

function dragStart() {
    this.classList.add('hold');
}

这里这个this指代的是被选中的目标，我们动态添加一个class="hold"的属性，当我们松开鼠标时，也就是拖拽结束，我们就把hold这个属性去除。

function dragEnd() {
    this.classList.remove('hold');
}

现在我们完成了开始和结束时的拖拽功能，还剩下拖拽过程没有实现。这里我们需要注意一点document.querySelectorAll('.empty') 返回的是一个 NodeList 对象，这个对象类似于数组，但并非真正的数组。NodeList 包含了文档中所有匹配给定 CSS 选择器的元素节点。也就是说我们可以遍历这个empties. 我们对empties中的每一个子元素进行经过，进入，离开，放下这几个事件的监听，并对监听做出样式改变。

for (let empty of empties) {
    //经过
    empty.addEventListener('dragover', dragOver)
    //进入
    empty.addEventListener('dragenter', dragEnter)
    //离开
    empty.addEventListener('dragleave', dragLeave)
    //放下
    empty.addEventListener('drop', dragDrop)
}

function dragOver(e) {
    e.preventDefault();
    console.log('over');
}
function dragEnter(e) {
    e.preventDefault();
    this.classList.add('hovered');
    console.log('enter');
}
function dragLeave() {
    this.classList.remove('hovered');

}
function dragDrop() {
    console.log('drop');
    this.className = 'empty'
    this.append(fill);
}

dragover, dragenter,dragleave,drop这几个事件我们前文中已经为家介绍各自分别什么时候触发。 在dragOver(e),dragEnter(e)这两个函数中我们接收一个参数，并调用e.preventDefault();是为了阻止浏览器的默认行为，如果不阻止的话，浏览器可能会执行我们不期望的操作，因此影响用户体验。

HTML5的拖放（Drag and Drop）功能是一种强大的交互技术，它允许用户在网页上直观地移动和组织元素。通过使用draggable属性和监听特定的事件，开发者可以轻松地在网页中实现这一功能，增强用户体验。

希望文章能对您有所帮助，感谢大家阅读！！！

avatar
文章
阅读
粉丝