HTML5 拖放实例-W3CAPI 在线教程

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>

HTML

HTML 5 基础教程