HTML5拖放

HTML5拖放

(1)、什么是拖放

1、拖放是一种常见的特性，即抓取对象以后拖到另一个位置

(2)、HTML5拖放实例

<script> ev可以实现内容共通。  dataTransfer  html5 新加对象

 

<script> ev可以实现内容共通。  dataTransfer  html5 新加对象
Function allowDrop(ev)
{
ev.preventDefault();
}
Function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
functiondrop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>
<p>拖动RUNOOB.COM图片到矩形框中:</p>
<div id="div1"ondrop="drop(event)"ondragover="allowDrop(event)"></
div>
<br>
<img id="drag1" src="/images/logo.png" draggable="true" ondragstart=
"drag(event)"width="336"height="69">

　

(3)、设置元素为可拖放

首先，为了使元素可拖动，把draggable属性设置为true：

<img draggable="true">

(4)、拖动 方法-ondragstart和setData() 设置元素 元素要进行

setData()存入源对象的数据  getData（“属性名”）获取属性值

第一个参数是存的数据类型（也可以是属性名），第二个是存的数据（也可以是属性值  可以把其他属性的值赋给属性值）

Function drag(ev){

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

}

Text是一个DOM String表示要添加到dragobject的拖动数据的类型。值是可

拖动元素的id("drag1")。

 

ondrop放下  ondropover 放完松手

放到何处-ondragover

进行放置-ondrop