HTML5如何实现元素拖拽

很多前端恐怕都不了解HTML5的拖拽怎么实现吧，本文了解了下思路。进行整理备份，便于以后查阅。

先上示例：

index.html

XML/HTML Code复制内容到剪贴板

<!doctypehtml>

<html>

<head>

<metacharset="UTF-8">

<style>

.box{

width:400px;

height:400px;

float:left;

}

#box1{

background:#CCC;

}

#box2{

background:#FF0;

}

</style>

</head>

<body>

<divid="box1"class="box"></div>

<divid="box2"class="box"></div>

<imgsrc="http://pica.zol-img.com.cn/2016/02/1ace90ad77db716547614a18c4a9263g.jpg"alt=""id="img1"/>

JavaScript Code复制内容到剪贴板

<scriptsrc="app1.js"></script>

</body>

</html>

app1.js

/**

*app1.js

varoBox1,

oBox2,

oImg1;

window.onload=function(){

oBox1=document.getElementById('box1');

oBox2=document.getElementById('box2');

oImg1=document.getElementById('img1');

oBox1.ondragover=oBox2.ondragover=function(e){

e.preventDefault();

};

oImg1.ondragstart=function(e){

e.dataTransfer.setData('text',e.target.id);

};

oBox1.ondrop=dropImg;

oBox2.ondrop=dropImg;

};

functiondropImg(e){

e.preventDefault();

vartempImg=document.getElementById(e.dataTransfer.getData('text'));

e.target.appendChild(tempImg);

}

涉及知识点

在拖放的过程中会触发以下事件：
在拖动目标上触发事件 (源元素)
　　ondragstart - 用户开始拖动元素时触发
　　ondrag - 元素正在拖动时触发
　　ondragend - 用户完成元素拖动后触发

释放目标时触发的事件
　　ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件
　　ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件
　　ondragleave - 当被鼠标拖动的对象离开其容器范围内时触发此事件
　　ondrop - 在一个拖动过程中，释放鼠标键时触发此事件

event对象（以e代替）

e.target

　　W3Cschool上的解释是：返回触发此事件的元素（事件的目标节点），这个target属性只兼容ie9及以上

e.preventDefault()

　　取消事件的默认动作。

e.dataTransfer.setData()

　　设置被拖数据的数据类型和值：
复制代码代码如下:e.dataTransfer.setData("Text",ev.target.id); //第一个参数为Text（小写的也行）

e.dataTransfer.getData()

　　获得被拖的数据：
复制代码代码如下:e.dataTransfer.getData("Text");

以上就是本文的全部内容，希望对大家的学习有所帮助。

原文：http://www.cnblogs.com/oovwall/p/5213580.html

相关文章

最新文章

热门文章

猜你喜欢