HTML5拖放

  拖放(drag和drop)是html5标准组成,下面我们从五个方面对其进行叙述,分别是如何成为拖动物体,如何成为拖动目标,拖动物体上拥有的事件,拖动目标上拥有的事件以及拖放物体间如何传递信息。

拖动物体上拥有的事件

  1. dragstart (在物体刚被拖动时触发)
  2. drag (在dragstart事件触发之后就被触发)
  3. dragend (拖动事件结束时触发)

拖动目标上拥有的事件

  1. dragenter (当拖拽元素进入放置目标时触发)
  2. dragover (当拖拽元素在放置目标中移动时触发,类似于mouseover)
  3. drop (当拖拽元素放置在放置目标中时触发)

如何成为拖动物体

在html中img元素默认可以进行拖拽,其它元素需要设置draggable=true,即可对其进行拖拽。

1 <div draggable="true"></div>

如何成为拖动目标

html中,元素默认不能成为放置目标,只有我们禁止了drapenter和drapover事件的默认行为时,可以称为拖放目标。

1 droptarget.addEventListener(‘dragenter‘, function(event) {
2     event.preventDefault();
3 });
4 droptarget.addEventListener(‘dragover‘, function(event) {
5     event.preventDefault();
6 });

拖放物体间如何传递信息

事件中具有一个dataTransfer对象,它拥有的两个常用方法setData()和getData(),分别用于在存放拖拽信息以及获取拖拽信息。其中,setData()只能在拖拽事件刚开始时设置,即dragstart事件时设置,getData()则一般在放置获取,即drop事件触发时获取。

 1 // drapobj 拖拽元素
 2 // droptarget 放置目标
 3 dragobj.addEventListener(‘dragstart‘, function(event) {
 4     event.dataTransfer.setData(‘id‘, dragobj.id);
 5 });
 6 droptarget.addEventListener(‘drop‘, function(event) {
 7     var id = event.dataTransfer.getData(‘id‘);
 8     var obj = document.getElementById(id);
 9     event.preventDefault();
10     this.appendChild(obj);
11 });

完整代码

 1 <!DOCTYPE html>
 2 <html lang="en">
 3
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>HTML5 拖拽</title>
 7 </head>
 8
 9 <body>
10     <div draggable="true"></div>
11     <div style="height: 150px" id="dragobj" draggable="true">
12         <img src="c_06.jpg" alt="">
13     </div>
14     <div id="droptarget" style="width: 150px; height: 150px;background-color: #eee;"></div>
15 </body>
16 <script>
17 var droptarget = document.getElementById(‘droptarget‘);
18 var dragobj = document.getElementById(‘dragobj‘);
19
20 // drapobj 拖拽元素
21 // droptarget 放置目标
22 dragobj.addEventListener(‘dragstart‘, function(event) {
23     event.dataTransfer.setData(‘id‘, dragobj.id);
24 });
25 droptarget.addEventListener(‘dragenter‘, function(event) {
26     event.preventDefault();
27 });
28 droptarget.addEventListener(‘dragover‘, function(event) {
29     event.preventDefault();
30 });
31 droptarget.addEventListener(‘drop‘, function(event) {
32     var id = event.dataTransfer.getData(‘id‘);
33     var obj = document.getElementById(id);
34     event.preventDefault();
35     this.appendChild(obj);
36 });
37 </script>
38
39 </html>

存在问题

火狐浏览器中拖拽图片默认打开新窗口,根据javascript高级程序设计中在drop事件中禁止默认事件,未解决问题。

解决方法:将图片作为div的背景图片,将div作为拖拽物体,则不存在此问题。

最终代码

 1 <!DOCTYPE html>
 2 <html lang="en">
 3
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>HTML5 拖拽</title>
 7     <style>
 8     div {
 9         width: 120px;
10         height: 136px;
11     }
12
13     #dragobj {
14         background: url(‘c_06.jpg‘) no-repeat;
15     }
16
17     #droptarget {
18         background-color: #eee;
19     }
20     </style>
21 </head>
22
23 <body>
24     <div id="dragobj" draggable="true">
25     </div>
26     <div id="droptarget"></div>
27 </body>
28 <script>
29 var droptarget = document.getElementById(‘droptarget‘);
30 var dragobj = document.getElementById(‘dragobj‘);
31
32 // drapobj 拖拽元素
33 // droptarget 放置目标
34 dragobj.addEventListener(‘dragstart‘, function(event) {
35     event.dataTransfer.setData(‘id‘, dragobj.id);
36 });
37 droptarget.addEventListener(‘dragenter‘, function(event) {
38     event.preventDefault();
39 });
40 droptarget.addEventListener(‘dragover‘, function(event) {
41     event.preventDefault();
42 });
43 droptarget.addEventListener(‘drop‘, function(event) {
44     var id = event.dataTransfer.getData(‘id‘);
45     var obj = document.getElementById(id);
46     event.preventDefault();
47     this.appendChild(obj);
48 });
49 </script>
50
51 </html>

时间: 2024-10-12 17:57:00

HTML5拖放的相关文章

HTML5 拖放(Drag 和 Drop)功能开发——基础实战

随着HTML5的普及度越来越高,现在写代码也遇到一些了,经过同事的点播开展了一次Dojo活动用以技术交流,我也乘此机会将HTML5的拖放功能整理了一下. 简介 拖拽(Drag/Drop)是个非常普遍的功能.在生活中,拖放物品其实是相当常见的一个动作.标榜“互联网生活尖凿狮”的程序猿也在一直试图用鼠标模拟出“手”的操作,用来给用户以更好的体验,你可以抓住一个对象,并且拖动到你想放置的区域.很多javascript都类似实现了相关的功能,例如,jQueryUI的draganddrop组件,比如<JS

HTML5——拖放

HTML5拖放 1.HTML5拖放 拖放(Drag和drop)是HTML5标准的组成部分. 2.拖动开始: ondragstart:调用了一个函数,drag(event),它规定了被拖动的数据 3.设置拖动数据 setData():设置被拖数据的数据类型和值. 4.放入位置: ondragover:事件规定在何处放置被拖动的数据. 5.放置: ondrop:当放置被拖放数据时,会发生drop事件 总结: 在拖动目标上触发事件(源元素): ondragstart:用户开始拖动元素时触发 ondra

HTML5拖放API

拖放 拖放是一种常见的特性,即抓取对象以后拖到另一个位置. 在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放. 浏览器支持 Internet Explorer 9.Firefox.Opera 12.Chrome 以及 Safari 5 支持拖放. 注释:在 Safari 5.1.2 中不支持拖放. 拖放步骤 1.对象元素的draggable属性设置为true(draggable="true").还需要注意的是a元素和img元素必须指定href.dragstart 被拖放的元素

HTML5拖放API2

在HTML5中,已经支持在浏览器与其他应用程序之间的数据互相拖动,同时也大大简化了有关于拖放方面的代码. 实现拖放的步骤 在HTML5中要想实现拖放操作,至少要经过两个步骤: 将想要拖放的对象元素的draggable属性设为true(draggable="true").这样才能将该元素进行拖放.另外,img元素和a元素(必须指定href属性)默认允许拖放. 编写与拖放有关的事件处理代码.关于拖放存在的几个事件如下所示. 拖放的相关事件 事件 产生事件的元素 描述 dragstart 被

HTML5拖放事件(Drag-and-Drop,DnD)

拖放 拖放是一种常见的特性,即抓取对象以后拖到另一个位置.在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放. 拖放是在“拖放源(drag source)”和“拖放目标(drop target)”之间传输数据的用户界面.下面例子将演示如何创建自定义拖放源和自定义拖放目标,前者传输数据而不是其文本内容,后者以某种方式相应拖放数据而不是仅显示它. 浏览器支持 Internet Explorer 9.Firefox.Opera 12.Chrome 以及 Safari 5 支持拖放. 注释:在

HTML5拖放(drag和drog)

拖放(drag和drog)是HTML5的标准的组成部分,也是种常见的特性,意义为抓起一个元素放入到另外的一个位置,在HTML5中任何元素都可以被拖放,前题是要相关进行设置. 1.设置元素为可拖放,也就是把drapgable属性设置为true 2.拖动什么-ondragstart和setData(),规定元素被拖动时会发生什么? (1):ondragstart属性调用了一个函数drag(event),它规定了被拖动的数据. (2):dataTransfer.setData()方法设置被拖动数据的数

HTML5 拖放(Drag 和 Drop)详解与实例

简介 拖放是一种常见的特性,即抓取对象以后拖到另一个位置. 在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放. 先点击一个小例子:在用户开始拖动 <p> 元素时执行 JavaScript <p draggable="true" ondragstart="myFunction(event)">拖动我!</p> 提示: 链接和图片默认是可拖动的,不需要 draggable 属性. 定义和用法 在拖放的过程中会触发以下事件:

浅谈HTML5拖放

现在,新增的HTML5元素很多,也给开发者带来了很多便利,比如说:结构标记header .nav.arctile.section.footer 表单元素:url.date.emaile.search.tel.range.color.datalist.progress.meter.output等,还有一些webstroge元素.绘图元素.拖放api等,这里着重说一下拖放api. 在生活中,我们经常将桌面的应用程序元素,从一个地方拖拽到另外一个地方,开发者没有一种能实现这种操作的标准技术,在HTML

html5拖放操作

最近在看html5时看到的一个有意思的拖放效果,这里是简单的一个拖放删除元素的效果. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>拖放操作</title> <style> li{ list-style:none;width:100px; height: 100px; background: red; margin-bottom: