当前位置 : IT培训网 > Web前端 > Web教程 > HTML5 如何在网页中实现拖放(Drag 和 Drop)

HTML5 如何在网页中实现拖放(Drag 和 Drop)

时间:2016-12-07 12:05:10  来源:web前端培训网  作者:IT培训网  已有:名学员访问该课程
标签(Tag):   html5(196)Drag(4)Drop(4)
随着网页设计技术的更新换代,在网页中实现拖放功能越来越方便了,不仅省去了网页开发者的写代码的繁琐,也为企业实现更多的网站功能做出了不菲的贡献,如果你想学习这方面的知识,想要实现更多的拖放效果,那就一起来

随着HTML5的出现,在网页中实现拖放已经不是什么难事了,只要我们掌握了拖放的代码,加以熟练运用即可。想要学习HTML5拖放功能的小盆友们,赶紧随着IT培训网小编来看看吧!

拖放(Drag 和 drop)是 HTML5 标准的组成部分。

HTML5 如何在网页中实现拖放(Drag 和 Drop)_www.cnitedu.cn

将w3cschool图标拖动到矩形框中。

拖放

拖放是一种常见的特性,即抓取对象以后拖到另一个位置。

在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放。

浏览器支持

HTML5 如何在网页中实现拖放(Drag 和 Drop)_www.cnitedu.cn

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.cnitedu.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>

运行结果:

拖动前:

HTML5 如何在网页中实现拖放(Drag 和 Drop)_www.cnitedu.cn

拖动后:

HTML5 如何在网页中实现拖放(Drag 和 Drop)_www.cnitedu.cn

它看上去也许有些复杂,不过我们可以分别研究拖放事件的不同部分。

设置元素为可拖放

首先,为了使元素可拖动,把 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.cnitedu.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>

运行结果:

拖动前效果:

HTML5 如何在网页中实现拖放(Drag 和 Drop)_www.cnitedu.cn

拖动后效果:

HTML5 如何在网页中实现拖放(Drag 和 Drop)_www.cnitedu.cn

随着网页设计技术的更新换代,在网页中实现拖放功能越来越方便了,不仅省去了网页开发者的写代码的繁琐,也为企业实现更多的网站功能做出了不菲的贡献,如果你想学习这方面的知识,想要实现更多的拖放效果,那就一起来吧,报读IT培训网H5培训班,让你学网页设计轻松有趣。

顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
------分隔线----------------------------
Web 教程
1、HTML 教程
1.1 HTML 简介
1.2 HTML 编辑器
1.3 HTML 基础
1.4 HTML 元素
1.5 HTML 属性
1.6 HTML 标题
1.7 HTML 段落
1.8 HTML 文本格式化
1.9 HTML 链接
1.10 HTML 头部
1.11 HTML CSS
1.12 HTML 图像
1.13 HTML 表格
1.14 HTML 列表
1.15 HTML 区块
1.16 HTML 布局
1.17 HTML 表单
1.18 HTML 框架
1.19 HTML 颜色
1.20 HTML 颜色名
1.21 HTML 颜色值
1.22 HTML 脚本
1.23 HTML 字符实体
1.24 HTML URL
1.25 HTML 速查列表
1.26 HTML 总结
1.27 HTML 简介
2、HTML5
2.1 HTML5 教程
2.2 HTML5 浏览器支持
2.3 HTML5 新元素
2.4 HTML5 Canvas
2.5 HTML5 内联 SVG
2.6 HTML5 MathML
2.7 HTML5 拖放
2.8 HTML5 地理定位
2.9 HTML5 Video(视频)
2.10 HTML5 Audio(音频)
2.11 HTML5 Input 类型
2.12 HTML5 表单元素
2.13 HTML5 表单属性
2.14 HTML5 语义元素
2.15 HTML5 Web 存储
2.16 HTML5 Web SQL
2.17 HTML5 应用程序缓存
2.18 HTML5 Web Workers
2.19 HTML5 SSE
2.20 HTML5 WebSocket
2.21 HTML5 代码规范
3、HTML 媒体
3.1 HTML 媒体(Media)
3.2 HTML 插件
3.3 HTML 音频(Audio)
3.4 HTML视频(Videos)播放