HTML 5 拖放

原创 2015年07月09日 11:07:15
<!-- 拖拽 -->
	<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
	<br/>
	<img id="drag1" src="mm1.jpg" draggable="true" ondragstart="drag(event)" alt="张含韵">
	<br/>
	<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

/*----------------------拖拽----------------------*/
	// ondragover 事件规定在何处放置被拖动的数据。
	// 默认地,无法将数据/元素放置到其他元素中。如果需要设置允许放置,我们必须阻止对元素的默认处理方式。
	function allowDrop(ev){
		ev.preventDefault();
	}
	// 拖动什么 
	function drag(ev){
		ev.dataTransfer.setData("Text",ev.target.id); //设置被拖数据的数据类型和值
	}
	// 当放置被拖数据时,会发生 drop 事件。
	function drop(ev){
		ev.preventDefault();   /*调用 preventDefault()来避免浏览器对数据的默认处理(drop事件的默认行为是以链接形式打开)*/
		var data=ev.dataTransfer.getData("Text");    /*通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在setData()方法中设置为相同类型的任何数据。*/
		ev.target.appendChild(document.getElementById(data));  /*被拖数据是被拖元素的 id ("drag1")*/   /*把被拖元素追加到放置元素(目标元素)中*/
	}

第一步:拖动什么 - 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")
  • 把被拖元素追加到放置元素(目标元素)中
版权声明:本文为博主原创文章,未经博主允许不得转载。

深入理解html5拖放

最早在网页中引入JavaScript拖放功能是IE4。当时,网页中只有两种对象可以拖放:图像和某些文本。拖放图像时,把鼠标放到图像上,按住鼠标不放就可以拖放它。拖放文本时,要先选中文本,然后可以像拖放...
  • u013344815
  • u013344815
  • 2016年03月23日 22:27
  • 697

HTML 5 拖放[拖放图片]

拖放(Drag 和 drop)是 HTML5 标准的组成部分; 拖放 拖放是一种常见的特性,即抓取对象以后拖到另一个位置。 在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放。 ...
  • shockerjue
  • shockerjue
  • 2013年07月14日 20:00
  • 628

html5实现图片任意拖放及本地图片拖放预览特效解析

最近一直在学习html5,对于图片在两个div内任意拖放感觉特别炫,扩展一下做一些特效应该很不错,而且还可以实现本地图片的拖拽上传功能,下面对上述两个功能做一个代码的解析: ** 1、HTML5...
  • u013137263
  • u013137263
  • 2015年08月24日 08:58
  • 1170

Lesson05:HTML 5 拖放

拖放(Drag 和 drop)是 HTML5 标准的组成部分。 拖放 拖放是一种常见的特性,即抓取对象以后拖到另一个位置。 在 HTML5 中,拖放是标准的一部分,任何元素都...
  • PrinceTerence
  • PrinceTerence
  • 2013年09月05日 15:48
  • 657

html 5 拖放

拖放(Drag 和 drop)是 HTML5 标准的组成部分。 拖放 拖放是一种常见的特性,即抓取对象以后拖到另一个位置。 在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放。 ...
  • Zoe_Wang_ing
  • Zoe_Wang_ing
  • 2013年05月02日 16:21
  • 470

HTML 5 拖放

拖放(Drag 和 drop)是 HTML5 标准的组成部分。 拖放 拖放是一种常见的特性,即抓取对象以后拖到另一个位置。 在 HTML5 中,拖放是标准的一部分,任何元素都...
  • ccssddnnbbookkee
  • ccssddnnbbookkee
  • 2015年01月01日 01:25
  • 309

html5篇——拖放(Drag和Drop)

好久没有更新html5了,继续更新html5,今天更新html5的拖放功能。 拖放,就是抓取一个对象后拖放到另一个位置。很常用的一个功能,在html5中,任何元素都能够拖放。 浏览器支持 Inter...
  • u010556394
  • u010556394
  • 2016年05月30日 17:23
  • 1395

如何使用HTML5进行文件拖放

实现将文件从桌面直接拖放到浏览器中是web应用开发的终极目标之一,本文作为接下来四篇文章的第一篇将解决以下问题: 1.实现将一个文件拖放到一个页面元素上 2.在JavaScript中分析拖放的...
  • goitcast
  • goitcast
  • 2012年08月27日 09:13
  • 1767

HTML5元素拖放

注:如果文本出现不能自动换行现象,请将游览器调成兼容模式概叙  HTML5中的元素都是可以拖放的,拖放可以分成两个动作。   在某个元素上按下,然后开始移动鼠标,在移动的过程中,只要没有松开鼠标,将...
  • qq_25312787
  • qq_25312787
  • 2017年03月01日 15:33
  • 168

HTML5之拖放功能(多文件上传和元素拖放)

在Web应用中,良好的用户体验是设计师们一直的追求,拖拽体验就是其中之一。在HTML5之前,已经可以使用事件mousedown、mousemove和mouseup巧妙地实现了页面内的拖放操作,但是拖放...
  • zuosixiaonengshou
  • zuosixiaonengshou
  • 2017年05月10日 00:05
  • 533
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:HTML 5 拖放
举报原因:
原因补充:

(最多只允许输入30个字)