HTML 5 基础教程

HTML是超文本标记语言，是一种专门用来制作网页的语言，而HTML5就是它的第五个版本，2014年10月29日，万维网联盟宣布，经过接近8年的艰苦努力，该标准规范终于制定完成，该标准针对当前互联网的飞速发展制定了更加标准的网页语言规范及适用功能，同时也给我们开发者带来了更多的开发选择，学习它是每个前端开发者必修的课程。

W3CAPI

2020-06-15 06:59:35

文档目录

我的书签

请登录

HTML5 拖放实例

一、实现标签元素的拖放步骤

由于要实现对某个元素的拖放功能，需要事先进行多个参数的设置，所以这里存在了步骤的概念，我们按照如下步骤进行即可，不必去了解为什么这样，因为就是这样设计的：

1、设置元素为可拖放

为了使某个元素可拖动，我们给他添加 draggable 属性，并且把 draggable 属性设置为 true ：

<img draggable="true" />

2、设置要拖动的内容（ondragstart 和 setData()）

设置当元素被拖动时，要拖动的内容是什么；这里需要给要拖动的元素添加 ondragstart事件（当元素开始用鼠标拖动时，会执行这里设置的函数），然后我们需要在事件的回调中设置拖动的内容，如下代码：

<img id="drag1" src="/static/resource/img/logo.png" draggable="true" ondragstart="drag(event)"  />
function drag(ev) {
   //设置被拖数据的数据类型和值
   ev.dataTransfer.setData("img",ev.target.id); //数据类型可以是任意字符 "img"，值是可拖动元素的 id ("drag1")
}

3、设置拖动元素可以放置的位置（ondragover）

默认情况下，我们无法将数据/元素放置到其他元素中。如下代码我们如果要将图片放置到另一个div容器中，需要设置这个div容器可以放置其他元素（给他添加ondragover 事件，ondragover 规定当我们拖动的元素经过它的时候，可以将拖动的元素放置到此处）：

<div id="div1" ondragover="allowDrop(event)"></div>
function allowDrop(ev) {
  ev.preventDefault(); //必须阻止对元素的默认处理方式，表示设置允许放置，默认行为是以链接形式打开
}

4、设置拖动元素的新位置（ondrop）

当我们松开鼠标后，表示我们要放置被拖动的数据，这时会发生 drop 事件，我们要规定被拖动的元素需要放置的新位置，这里给div容器添加 ondrop 事件，如下代码：

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
function drop(ev) {
  ev.preventDefault();
  var data=ev.dataTransfer.getData("img");
  ev.target.appendChild(document.getElementById(data));
}

调用 preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）
通过 dataTransfer.getData("img") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的数据
被拖元素数据是被拖元素的 id ("drag1")
把被拖动图片元素追加到放置元素（目标元素）中

二、拖动一个图片到一个div容器中

<!DOCTYPE HTML>
<html>
<head>
    <style type="text/css">
        #div1 { width:300px; height:120px;padding:10px; border:1px solid blue; font-size:12px; text-align: center; }
    </style>
    <script type="text/javascript">
        function allowDrop(ev) {
            ev.preventDefault();
        }
        function drag(ev) {
            ev.dataTransfer.setData("img",ev.target.id);
        }
        function drop(ev)  {
            ev.preventDefault();
            var data=ev.dataTransfer.getData("img");
            ev.target.appendChild(document.getElementById(data));
        }
    </script>

</head>
<body>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">我是一个容器，请用鼠标拖动下面的图片移动到我上面</div>
<img id="drag1" src="/static/resource/img/logo.png" draggable="true" ondragstart="drag(event)" height="100px"  />

</body>
</html>

三、在两个 <div> 元素之间拖动图像

<!DOCTYPE HTML>
<html>
<head>
    <style type="text/css">
        #div1, #div2 {float:left; width:198px; height:100px; margin:10px;padding:10px;border:1px solid blue;  text-align: center;}
    </style>
    <script type="text/javascript">
        function allowDrop(ev) {
            ev.preventDefault();
        }
        function drag(ev) {
            ev.dataTransfer.setData("img",ev.target.id);
        }
        function drop(ev) {
            ev.preventDefault();
            var data=ev.dataTransfer.getData("img");
            ev.target.appendChild(document.getElementById(data));
        }
    </script>
</head>
<body>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
    <img src="/static/resource/img/logo.png" draggable="true" ondragstart="drag(event)" id="drag1" height="100px" />
</div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

</body>
</html>

作者文档