HTML5拖放
- 对象元素的draggable属性设置为true(draggable=”true”),还需要注意的是a元素和img元素必须指定href.
2.编写与施放有关的事件处理代码。
事件 | 产生事件的元素 | 描述 |
---|---|---|
dragstart | 被拖放的元素 | 开始拖放操作 |
drag | 被拖放的元素 | 拖放过程中 |
dragenter | 拖放过程中鼠标经过的元素 | 被拖放的元素开始进入本元素的范围之内 |
draggover | 拖放过程中鼠标经过的元素 | 被拖放的元素正在本元素的范围内移动 |
dragleave | 拖放过程中鼠标经过的元素 | 被拖放的元素离开本元素的范围~ |
drop | 被拖放的元素~ | -其他元素被拖放到了本元素中~ |
dragend~ | 被拖放的元素~ | 拖放操作结束~ |
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 ,DOMString data) | 向DataTransfer对象中存入数据 |
DOMString getData(DOMString format) | -从DataTransfer对象中读取数据 |
Void setDragImage(Element imag,long x,long y) | 用img元素来设置拖放目标 |
3.设置拖放时的视觉效果
dropEffect属性与effectAllowed属性结合起来可以设定拖放时的视觉效果。effectAllowed属性表示一个元素被拖放时所允许的视觉效果,一般在ondragstart事件中设定,他的值如下:
属性值 | 说明 |
---|---|
copy | 允许被拖动的元素被复制到项目中 |
move | 允许被拖动的元素被复制到项目中 |
link | 通过拖放操作,被拖动的元素会连接到拖到的目标元素上 |
copylink | 被拖动元素被复制或链接到拖动的目标元素中,根据拖动的目标元素来决定执行复制操作还是链接操作 |
copymove | 被拖动元素被复制或移动到拖动的目标元素中,根据被拖动的目标元素来决定执行复制操作还是移动操作 |
linkmove | 被拖动元素被链接或移动到拖动的目标元素中,根据拖动的目标元素来决定执行链接操作还是移动操作 |
all | 允许执行所有拖动操作 |
none | 不允许执行任何拖动操作 |
uninyialize | 不指定effectAllowed属性值,这是将执行浏览器中默认允许的拖动操作,但是这个操作不能通过effectAllowed属性值来获取 |
dropEffect属性来表示实际拖放时的视觉效果,一般在ondragover事件中指定,允许的值none.copy.link.move.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script>
function alloeDrop(ev)
{
//不执行默认处理(拒绝被拖放)
ev.preventDefault();
}
function drag(ev)
{
//使用setData(数据类型,携带的数据)
//方法将要拖放的数据存入dataTransfer对象
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.getElementByld(data));
}
</script>
<style>
#tuo{
background:#e54d26;
width:540px;
height:320px;
}
#cun{
width:540px;
height:320px;
border:2px solid #D2D2D2;
box-shadow:1px 4px 8px #646464;
}
</style>
</head>
<body>
<div id="cun" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br/>
<img src="html5.png" id="tuo" draggable="true" ondragstart="drag(event)" width="500" height="280"></img>
</body>
</html>