拖动事件小解

首先，要想拖动元素,首先得设置draggable= "true"

适用范围:默认图片和链接是可拖动的，无需添加

兼容性: Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari

eg: <img id= "aa" src="img/aHead.png" draggable="true" ondragstart="drag(event)" alt=""/>

相关方法:

在拖动目标上触发的方法:

ondragstart:开始拖动对象

ondrag:拖动过程中(每隔350ms触发一次)

ondragend:拖动结束(未释放成功就不会触发！)

在释放目标上触发的方法:

ondragenter:对象进入释放目标(超过一半进入触发)

ondraghover:对象在释放目标内移动(每隔350ms触发一次)

ondragleave:对离开释放目标(超过一半离开触发)

ondrop:释放对象(ondrop在线，ondragend在后)

实例:

源代码:

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8">

<title>菜鸟教程(runoob.com)</title>

<style>

.droptarget {

    float: left; 

     100px; 

    height: 35px;

    margin: 15px;

    padding: 10px;

    border: 1px solid #aaaaaa;

}

</style>

</head>

<body>



<p>在两个矩形框中来回拖动 p 元素:</p>

<div class="droptarget">

    <p draggable="true" id="dragtarget">拖动我!</p>

</div>

<div class="droptarget"></div>

<p style="clear:both;"><strong>注意：</strong>Internet Explorer 8 及更早 IE 版本或 Safari 5.1 及更早版本的浏览器不支持 drag 事件。</p>

<p id="demo"></p>

<script>

/* 拖动时触发*/

document.addEventListener("dragstart", function(event) {

    //dataTransfer.setData()方法设置数据类型和拖动的数据

    event.dataTransfer.setData("Text", event.target.id);

    // 拖动 p 元素时输出一些文本

    document.getElementById("demo").innerHTML = "开始拖动 p 元素.";    

    //修改拖动元素的透明度

    event.target.style.opacity = "0.4";

});

//在拖动p元素的同时,改变输出文本的颜色

document.addEventListener("drag", function(event) {

    document.getElementById("demo").style.color = "red";

});

// 当拖完p元素输出一些文本元素和重置透明度

document.addEventListener("dragend", function(event) {

    document.getElementById("demo").innerHTML = "完成 p 元素的拖动";

    event.target.style.opacity = "1";

});

/* 拖动完成后触发 */

// 当p元素完成拖动进入droptarget,改变div的边框样式

document.addEventListener("dragenter", function(event) {

    if ( event.target.className == "droptarget" ) {

        event.target.style.border = "3px dotted red";

    }

});

拖动事件MouseEvent()内有dataTransfer属性

属性如下:

dropEffect: "none"
effectAllowed: "none"
files: FileList
items: DataTransferItemList
types: Array[0]
__proto__: DataTransfer

解析如下:

属性:

effectAllowed: 规定元素被拖动时允许的效果，在ondragstart中设置

　　1.copy 复制

　　2.move 移动

　　3.link 建立一个源位置到新位置的链接

　　4.copyLink:复制或链接

　　5.copyMove

　　6.linkMove

　　7.all: 所有操作

　　8.none: 禁止所有

　　9.uninitialized:缺省值(默认值)相当于all

----------------------------------------------------------------------------------------------------------------

dropEffect:规定元素被拖进当前放入元素时的效果，可在ondragenter或ondraghover中设置

　　1.copy 2.move 3.link 4.none(禁止放置)

----------------------------------------------------------------------------------------------------------------

items:该属性返回DataTransferItems对象，该对象代表了拖动数据。

---------------------------------------------------------------------------------------------------------------

types:该属性返回一个DOMStringList对象，该对象包括了存入dataTransfer中数据的所有类型。

主要方法:

setData(format,data):

功能:将指定格式的数据赋值给dataTransfer对象，参数format定义数据的格式也就是数据的类型，data为待赋值的数据

说明:format: IE只允许"text"或"URL"两种类型，html5允许所有MIME类型，也支持"text"和"URL",考虑到ff的兼容性，设置时"text"写做"Text"，"URL"大写，读取文本时用"Text",读取url时检测"url"和"URL"

　　在拖动文本或链接时，浏览器会调用此方法，将文本以"text"形式存储于dataTransfer对象，将链接以"url"形式存储于dataTransfer对象

　　只能在ondrop中读取

　　若没有放置成功,DataTransfer会自行销毁！

getData(format):从dataTransfer对象中获取指定格式的数据，format代表数据格式，data为数据

clearData([format]):从dataTransfer对象中删除指定格式的数据，参数可选，若不给出，则为删除对象中所有的数据。

addElement(element):添加自定义图标

setDragImage(element,x,y):设置拖放操作的自定义图标。其中element设置自定义图标，x设置图标与鼠标在水平方向上的距离，y设置图标与鼠标在垂直方向上的距离。

-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------