HTML5 的新属性 drag 可以实现这个效果
创新互联专业为企业提供金林网站建设、金林做网站、金林网站设计、金林网站制作等企业网站建设、网页设计与制作、金林企业网站模板建站服务，十余年金林做网站经验，不只是建网站，更提供有价值的思路和整体网络服务。
如果想出现拖动的动画效果 就用 JS 的 onmousedown 和 onmousemove 来实现
拖拽的过程就不说了，这里主要说一下如何在前端获取到图片的相关信息。
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;
可以参考chrome小乐图客扩展的截图功能，支持粘贴剪贴板图片、拖拽图片、或者粘贴图片网址上传，是通过html5 file reader实现的。
一、关于拖拽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 );
