html5图片拖动的代码

一、关于拖拽API

专注于为中小企业提供成都网站设计、成都网站制作服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业周至免费做网站提供优质的服务。我们立足成都，凝聚了一批互联网行业人才，有力地推动了上千家企业的稳健成长，帮助中小企业通过网站建设实现规模扩充和转变。

拖拽API是HTML5的新特性，相对于其他新特性来说，重要程度占到6成，实际开发中使用比例占到3成，学习要求个人认为是达到掌握即可的程度。

二、什么是拖拽和释放？

拖拽：Drag

释放：Drop

拖拽指的是鼠标点击源对象后一直移动对象不松手，一但松手即释放了

三、什么是源对象和目标对象？

源对象：指的是我们鼠标点击的一个事物，这里可以是一张图片，一个DIV，一段文本等等。

目标对象：指的是我们拖动源对象后移动到一块区域，源对象可以进入这个区域，可以在这个区域上方悬停(未松手)，可以释松手释放将源对象放置此处(已松手)，也可以悬停后离开该区域。

四、拖拽API的相关函数

解释了什么是源对象和目标对象后，回归前端中的拖拽API，由上面的操作我们可以得出几个函数

被拖动的源对象可以触发的事件：

(1)ondragstart：源对象开始被拖动

(2)ondrag：源对象被拖动过程中(鼠标可能在移动也可能未移动)

(3)ondragend：源对象被拖动结束

拖动源对象可以进入到上方的目标对象可以触发的事件：

(1)ondragenter：目标对象被源对象拖动着进入

(2)ondragover：目标对象被源对象拖动着悬停在上方

(3)ondragleave：源对象拖动着离开了目标对象

(4)ondrop：源对象拖动着在目标对象上方释放/松手

拖拽API总共就是7个函数！！

五、如何在拖动的源对象事件和目标对象事件间传递数据

HTML5为所有的拖动相关事件提供了一个新的属性：

e.dataTransfer { } //数据传递对象

功能：用于在源对象和目标对象的事件间传递数据

源对象上的事件处理中保存数据：

e.dataTransfer.setData( k, v ); //k-v必须都是string类型

目标对象上的事件处理中读取数据：

var v = e.dataTransfer.getData( k );

html5 图片上传 可收缩 拖拽

可以参考chrome小乐图客扩展的截图功能，支持粘贴剪贴板图片、拖拽图片、或者粘贴图片网址上传，是通过html5 file reader实现的。

请问html怎么实现拖动，就是将一个图片拖到另一张图上的制定部分成为一体？

HTML5 的新属性 drag 可以实现这个效果

如果想出现拖动的动画效果 就用 JS 的 onmousedown 和 onmousemove 来实现

html5拖拽图片上传，怎么获得图片原始尺寸

拖拽的过程就不说了，这里主要说一下如何在前端获取到图片的相关信息。

html5里有一个fileReader的全局变量，用来读取本地文件，比如txt，img等，下面是一个简单的代码。

function checkFile(files){

var file = files[0];

var reader = new FileReader();

// show表示div id='show'/div，用来展示图片预览的

if(!/image\/\w+/.test(file.type)){

show.innerHTML = "请确保文件为图像类型";

return false;

}

// onload是异步操作

reader.onload = function(e){

show.innerHTML = 'img src="'+e.target.result+'" alt="img"';

}

reader.readAsDataURL(file);

}

这样就能够在不上传到服务器的前提下预览图片。当然，这个问题的重点是获取图片的原始尺寸，html5里还提供了两个变量来获取：naturalWidth和naturalHeight，这两个分别来获取图片的原始宽度和原始高度。

在上面的例子中，就能通过下面的方式获取到：

var width = e.target.naturalWidth;

var height = e.target.naturalHeight;

还有一种情况就是，如果已经存在页面里的图片，怎么获取到原始尺寸呢，可以这样：

var img = document.getElementsByTagName('img')[0]; // 获取到图片

var width = img.naturalWidth;

var height = img.naturalHeight;

本文名称：html5拖拽图片,HTML5拖动
文章URL：http://myzitong.com/article/dsdojce.html