HTML5 _ H5 拖放

H5 拖放

上面是一个例子，不出意外，汝可以将专否的logo从一个方框里拖放到另外一个方框里。

拖放

在电脑操作中一拖一放都是很正常的操作，把一个对象用鼠标拖动，放到另外一个位置。以前这在HTML中并不是支持的，但是在HTML5中，拖放已经成为了HTML标准中的一部分：任何元素都可以被拖放。

浏览器兼容性

下面列出的是各类型浏览器支持H5拖放功能的最低版本。

API
拖放（Drag and Drop）	4.0	9.0	3.5	6.0	12.0

HTML拖放的例子

这是一个很简单的例子，只是看起来有些复杂，后面会一步步拆解说明的。

<!DOCTYPE HTML>
<html>
<head>
<style>
#div1 {
    width: 360px;
    height: 80px;
    padding: 10px;
    border: 1px solid #333;
}
</style>
<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>

<p>把专否的logo拖入方框中去</p>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="logo1" src="https://logo.zhuanfou.com/zhuanfou-logo.png" draggable="true" ondragstart="drag(event)" width="120">

</body>
</html>

运行一下

Step.1 使元素可以被拖拽

要想拖拽某元素，首先得使这个元素可以被拖拽，方法很简单，只要把这个元素的draggable属性设置成true即可。

<img draggable="true">

Step.2 拖拽对象是什么？

然后能必须要让浏览器知道拖拽对象是什么。

如上例所示，ondragstart属性所绑定的函数drag(event)就可以用来定义具体的拖拽对象是什么。 dataTransfer.setData()方法是可以用来把一些数据绑定到事件之中，上面的例子中把拖拽对象的id值以“text”为名绑定到该事件中去。（这里的“text”并不是类型，而是一个代号而已，更像是随意设置的一个键名，叫“text”可以，叫“fucktext”也可以）

总之，要做的就是把拖拽对象的信息存入拖拽事件中去。

Step.3 拖放到哪里呢？

ondragover事件所触发的是去定义最终这个被拖拽的对象被放在哪里。

通常默认情况下，大部分的元素都是不能直接被作为拖拽对象被放置的地方。如果想某个元素可以被放置，就要提前设定好ondragover事件，使之触发到event.preventDefault()方法，从而结束整个拖拽事件。从而使该元素可以接收被拖拽的元素。

event.preventDefault()

Step.4 进行最终的拖拽放置

当结束拖拽事件，拖拽的数据被放置的时候，drop事件就会发生。上面的例子就是通过ondrop属性来定义所要触发的函数，在此函数中，重新获得当初绑定在拖拽中的数据，即当初被拖拽元素的id值，有了该元素的id值，就可以通过JavaScript或者Jquery来进行文档操作，即把被拖拽元素移动到被放置的元素内部。

function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
}

更多例子

如下所示，做个类似本章节最开始那个例子，让一张图片可以在两个方框内来回拖放。

<!DOCTYPE HTML>
<html>
<head>
<style>
#div1, #div2 {
    float: left;
    width: 100px;
    height: 35px;
    margin: 10px;
    padding: 10px;
    border: 1px solid #333;
}
</style>
<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>

<h2>拖放</h2>
<p>让专否的logo图片可以在两个div元素之间来回拖拽释放</p>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
  <img src="https://logo.zhuanfou.com/zhuanfou-logo.png" draggable="true" ondragstart="drag(event)" id="drag1" width="98">
</div>

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

</body>
</html>

运行一下

H5 拖放

推广