HTML5拖放API之回收站效果,HTML5拖放API

1、拖放的步骤

1、对象元素的draggable属性设置为true(draggable="true")。还需要注意的是a元素和img元素必须指定href。

2、编写与拖放有关的事件处理代码。

事件

产生事件的元素

描述

dragstart

被拖放的元素

开始拖放操作

drag

被拖放的元素

拖放过程中

dragenter

拖放过程中鼠标经过的元素

被拖放的元素开始进入本元素的范围之内

dragover

拖放过程中鼠标经过的元素

被拖放的元素正在本元素范围内移动

dragleave

拖放过程中鼠标经过的元素

被拖放的元素离开本元素的范围

drop

拖放的目标元素

其他元素被拖放到了本元素中

dragend

拖放的对象元素

拖放操作结束

2、DataTransfer对象的属性与方法

DataTransfer****对象的属性和方法

属性/方法

描述

dropEffect属性

表示拖放操作的视觉效果，允许设置其值，这个效果必须用在effectAllowed属性指定的允许的视觉效果的范围内，允许指定的值none、copy、link、move

effectAllowed属性

用来指定当元素被拖放时所允许的视觉效果，可以指定的值copy、link 、move、copylink 、linkmove、all、none、uninitialized

types属性

存入数据的种类，字符串的伪数组

void clearData(DOMString format)方法

清除DataTransfer对象中存放的数据，如果省略掉参数format就会清除全部数据。

void steData(DOMString format，DOMStrong data

向DataTransfer对象中存入数据

DOMString getData(DOMString format)

从DataTransfer对象中读取数据

void setDragImage(Element image，long x，long y)

用img元素来设置拖放图标

clearData方法可以用于清除DataTransfer对象中的数据。

3、拖放的时的效果

设置拖放时的视觉效果

dropEffect属性与effectAllowed属性结合起来可以设定拖放时的视觉效果。effectAllowed属性表示一个元素被拖放时所允许的视觉效果，一般在ondragstart事件中设定，他的值如下：

属性值

说明

copy

允许被拖动的元素被复制到项目中

move

允许将被拖动元素移动到被拖动的目标元素中

link

通过拖放操作，被拖动的元素会连接到拖到的目标元素上

copylink

被拖动元素被复制或链接到拖动的目标元素中，根据拖动的目标元素来决定执行复制操作还是链接操作

copyMove

被拖动元素复制或移动到拖到的目标元素中，根据被拖动的目标元素来决定复制操作还是移动操作

linkmove

被拖动元素被连接或移动到拖动的目标元素中，根据拖动的目标元素来决定执行链接操作还是移动操作

all

允许执行所有拖动操作

none

不允许执行任何拖动操作

uninyialize

不指定effectAllowed属性值。这是将执行浏览器中默认允许的拖动操作，但是这个操作不能通过effectAllowed属性值来获取

dropEffect属性表示实际拖放时的视觉效果，一般在ondragover事件中指定，允许的值none、copy、link、move。

小案例:

function allowDrop(ev)

{

//不执行默认处理(拒绝被拖放)

ev.preventDefault();

ev.dataTransfer.dropEffect = 'link'

}

function drag(ev)

{

// 使用setData(数据类型，携带的数据)

// 方法将要拖放的数据存入dataTransfer对象

// ev.clearData();

ev.effeAllowed = 'all';

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

}

function drop(ev)

{

//不执行默认处理(拒绝被拖放)

ev.preventDefault();

//使用getData()获取到数据，然后赋值给data

var data=ev.dataTransfer.getData("Text");

//使用appendChild方法把拖动的节点放到元素节点中成为他的子节点

ev.target.appendChild(document.getElementById(data));

}

#tuo{

background: #e54d26;

width: 540px;

height: 320px;

}

#cun{

width: 540px;

height: 320px;

border: 2px solid #D2D2D2;

box-shadow: 1px 4px 8px #646464;

}

效果图