html5拖拽图片,HTML5拖动
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拖动
文章链接：http://shouzuofang.com/article/dsdojce.html