HTML5拖放(drag和drog)

拖放(drag和drog)是HTML5的标准的组成部分，也是种常见的特性，意义为抓起一个元素放入到另外的一个位置，在HTML5中任何元素都可以被拖放，前题是要相关进行设置。

1、设置元素为可拖放，也就是把drapgable属性设置为true

2、拖动什么-ondragstart和setData(),规定元素被拖动时会发生什么？

(1):ondragstart属性调用了一个函数drag(ev)，它规定了被拖动的数据.

(2):ev.dataTransfer.setData()方法设置被拖动数据的数据类型和值

funcation drag(ev){

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

//数据类型是："Text",值是可拖动元素的id

}

3、放置何处-ondragover,

ondragover事件规定被拖动元素放置在何处，默认地是无法将数据或元素拖放到其它元素中的，如果需要设置允许放置，我们必须阻止对元素的默认处理方式，这里就需要用到ondragover事件的event.preventDefault()方法

4、进行放置-ondrog

当放置被拖动元素时，会发生drop事件，ondrop属性会调用一个函数drop(event)

function drop(ev)

{

ev.preventDefault();//调用preventDefault()方法是用来阻止浏览器对元素的默认行为，(drap)的默认行为是以链接的形式打开

var data=ev.dataTransfer.getData("Text");//通完dataTransfer.getData("Text")方法获取被拖动的数据，该方法将返回和setData("Text")方法中设置为相同类型的任何数据

ev.target.appendchild(document.getElementById(data)//被拖动数据是被拖元素的id);//把被元素追加到放置元素中

}

实例1：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
<script src="Css/jquery-2.1.4.js"></script>
<script>
function drag(ev)//放置什么
{
ev.dataTransfer.setData("Text",ev.target.id);
}
function dragOver(ev) {//如何放置
ev.preventDefault();
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>
<style>
div {
width:280px;
height:250px;
border:1px solid #aaaaaa;
padding:10px;
}
</style>
</head>
<body>
<article>
<h2>将HTML5LOGO放入到上面的方框中</h2>
<div id="div1" ondrop="drop(event)" ondragover="dragOver(event)"></div>
<figure>
<figcaption>HTML5LOGO</figcaption>
<img id="logo5" src="Images/HTML5LOGO.jpg" draggable="true" ondragstart="drag(event)"/>
</figure>
</article>
</body>
</html>

实例2：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
<script src="Css/jquery-2.1.4.js"></script>
<script>
function drag(ev) {
ev.dataTransfer.setData("Text", ev.target.id);
}
function dragOver(ev) {
ev.preventDefault();
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>
<style>
div {
width:200px;
height:100px;
border:1px solid #aaaaaa;
float:left;
margin:20px;
padding:10px;
}
figure {
clear:both;
}
</style>
</head>
<body>
<aside>
<h2>来回放置图片</h2>
<div id="div1"ondrop="drop(event)" ondragover="dragOver(event)"></div><div id="div2" ondrop="drop(event)" ondragover="dragOver(event)"></div>
<figure>
<figcaption>鲜花</figcaption>
<img id="image" src="Images/ct_html5_canvas_image.gif" alt="image" draggable="true" ondragstart="drag(event)"/>
</figure>
</aside>
</body>
</html>

巴特西

HTML5拖放(drag和drog)

最新文章

热门文章