IT培训网 - IT职场人学IT技术上IT培训网
HTML5 如何在网页中实现拖放（Drag 和 Drop）
时间：2016-12-07 12:05:10 来源：web前端培训网 作者：IT培训网 已有：名学员访问该课程
随着网页设计技术的更新换代，在网页中实现拖放功能越来越方便了，不仅省去了网页开发者的写代码的繁琐，也为企业实现更多的网站功能做出了不菲的贡献，如果你想学习这方面的知识，想要实现更多的拖放效果，那就一起来
随着HTML5的出现，在网页中实现拖放已经不是什么难事了，只要我们掌握了拖放的代码，加以熟练运用即可。想要学习HTML5拖放功能的小盆友们，赶紧随着IT培训网小编来看看吧！
拖放（Drag 和 drop）是 HTML5 标准的组成部分。
将w3cschool图标拖动到矩形框中。
拖放
拖放是一种常见的特性，即抓取对象以后拖到另一个位置。
在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。
浏览器支持
Internet ExplorerFirefoxOperaGoogle ChromeSafari
Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 支持拖动。
注意:Safari 5.1.2不支持拖动.
HTML5 拖放实例
下面的例子是一个简单的拖放实例：
实例
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>it培训网(www.itpxw.cn)</title>
<style type="text/css">
#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
</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>拖动 W3CSchool.cc 图片到矩形框中:</p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="/images/logo.png" draggable="true" ondragstart="drag(event)" width="336" height="69">
</body>
</html>
运行结果：
拖动前：
拖动后：
它看上去也许有些复杂，不过我们可以分别研究拖放事件的不同部分。
设置元素为可拖放
首先，为了使元素可拖动，把 draggable 属性设置为 true ：
<img draggable="true">
拖动什么 - ondragstart 和 setData()
然后，规定当元素被拖动时，会发生什么。
在上面的例子中，ondragstart 属性调用了一个函数，drag(event)，它规定了被拖动的数据。
dataTransfer.setData() 方法设置被拖数据的数据类型和值：
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
在这个例子中，数据类型是 "Text"，值是可拖动元素的 id ("drag1")。
放到何处 - ondragover
ondragover 事件规定在何处放置被拖动的数据。
默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。
这要通过调用 ondragover 事件的 event.preventDefault() 方法：
event.preventDefault()
进行放置 - ondrop
当放置被拖数据时，会发生 drop 事件。
在上面的例子中，ondrop 属性调用了一个函数，drop(event)：
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
代码解释：
调用 preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）
通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。
被拖数据是被拖元素的 id ("drag1")
把被拖元素追加到放置元素（目标元素）中
来回拖动实例：
如何在两个 <div> 元素之间拖放图像。
源代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>it培训网(www.itpxw.cn)</title>
<style type="text/css">
#div1, #div2
{float:left; width:100px; height:35px; margin:10px;padding:10px;border:1px solid #aaaaaa;}
</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>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
<img src="img_w3slogo.gif" draggable="true" ondragstart="drag(event)" id="drag1" width="88" height="31"></div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</body>
</html>
运行结果：
拖动前效果：
拖动后效果：
随着网页设计技术的更新换代，在网页中实现拖放功能越来越方便了，不仅省去了网页开发者的写代码的繁琐，也为企业实现更多的网站功能做出了不菲的贡献，如果你想学习这方面的知识，想要实现更多的拖放效果，那就一起来吧，报读IT培训网H5培训班，让你学网页设计轻松有趣。
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
------分隔线----------------------------
Java5保姆级教学方式，你适
超强代码人的薪资到底有
Java语言和GO语言到底哪个
为何让你坚持学习人工智
IT技术给零售业带来什么样
学习web前端需要懂得优化
web前端开发学会之后能从
传统的IT培训机构如何打赢
跳槽季节来啦，学Java的伙
没有一点IT经验的人学大数