html5图片拖拽,html元素拖拽

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 );

相关问答

Q1: html5 拖动效果怎么在手机上实现

html5 拖动效果在手机上实现方法是调用drag和drop一系列函数实现的。

注意：拖拽源在拖拽操作结束将得到dragend事件对象，不管操作成功与否。

举例：

定义可拖放内容

div id="columns"

 div class="column" draggable="true"headerA/header/div

 div class="column" draggable="true"headerB/header/div

 div class="column" draggable="true"headerC/header/div

/div

2、监听拖动事件

可附加大量不同事件以监听整个拖放过程：

dragstart

drag

dragenter

dragleave

dragover

drop

dragend

a.这里是开始拖拽

function handleDragStart(e) {

 this.style.opacity = '0.4';  // this / e.target is the source node.

}

var cols = document.querySelectorAll('#columns .column');

[].forEach.call(cols, function(col) {

 col.addEventListener('dragstart', handleDragStart, false);

});

b.dragenter、dragover 和 dragleave 事件处理程序可用于在拖动过程中提供额外的可视化提示。例如，在拖动期间将鼠标悬停在某一列上方时，其边框可能会变成虚线。这样，用户就能知道这些列也是放置的目标区域。

Q2: html5 图片上传 可收缩 拖拽

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