这是我参与「第四届青训营」笔记创作活动的第4天

draggable标签的作用

draggable标签是h5提供的规定元素是否能够拖动的标签

语法格式

<element draggable="true|false|auto">

属性值

draggable

设置元素是否可以拖动 true: 元素可以拖动 false：禁止拖动 auto：利用浏览器的默认属性

ondragstart

规定元素被拖动时发生了什么，可以通过dataTransfer.setData() 方法设置被拖动数据的数据类型和值

onjragover

规定被拖动的数据能够被放置到何处，注意需要阻止浏览器的默认行为

ondrop

当鼠标放开之后会触发drop事件，我们可以写一个方法来执行对应的功能

一个简单的实例

<!DOCTYPE HTML>
<html>
<head>
<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>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

<img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69">

</body>
</html>

摘自w3c，

总结

以前从没认识过这个标签，一直以为能够实现拖拽是什么高大上的功能emmmm，原来只需要通过一个标签就恩公偶轻松解决，这次写项目真的是收获颇丰

draggable标签的学习及使用 | 青训营笔记