星空网 > 软件开发 > 网页设计

HTML5拖拽功能drag


1.创建拖拽对象
给需要拖拽的元素设置draggable属性,它有三个值:
true:元素可以被拖拽;
false:元素不能被拖拽;
auto: 浏览器自己判断元素是否能被拖拽。

2.处理拖拽事件
当我们拖拽对象的时候会触发拖拽事件包括:
A.dragstart:当元素拖拽开始触发;
B.drag:在元素拖拽过程中触发;
C.dragend:元素拖拽结束时触发


3.创建投放区

①当拖拽对象进入投放区的时候会触发相关的事件

A.dragenter:当拖拽对象进入投放区时触发; B.dragover:拖拽对象在投放区内移动时触发; C.dragleave:拖拽对象没有投放到投放区,离开投放区的 时候触发;
D.drop:拖拽对象投放在投放区时触发。

②注意:dragenter、dragover可能会受到默认事件的影 响,所以我们在这两个事件当中使用 e.preventDefault();来阻止事件默认事件


4.使用dataTransfer传递数据
当我们需要拖拽对象向投放区传递数据的时候用到 dataTransfer有下面的属性和方法:

1.types:返回数据的格式; 2.getData(<format>):返回指定格式数据; 3.setData(<format>, <data>):设置指定格式数据;
4.clearData(<format>):移除指定格式数据; 5.files:返回已经投放的文件的信息数组。 1.type:文件类型
2.size:文件大小
3.name:文件名

 

编程实例:

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div{
width: 200px;
height: 200px;
border: 1px solid red;
margin:30px;
float: left;
}
img{
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div id="div1" ondrop="drop(event)" ondragover="allowDrag(event)">
<img src='/images/loading.gif' data-original="css/imgs/s3.jpg" id="img1" draggable="true" ondragstart="drag(event)" />
</div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrag(event)">

</div>
</body>
<script type="text/javascript">
function drag(e){
e.dataTransfer.setData("Text", e.target.id);
}
function drop(e){
var data= e.dataTransfer.getData("Text")
e.target.appendChild(document.getElementById(data));
e.preventDefault();
}
function allowDrag(e){
e.preventDefault();
}
</script>
</html>




原标题:HTML5拖拽功能drag

关键词:HTML

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

了解商标宣誓的用途与流程:https://www.kjdsnews.com/a/1359153.html
了解商标备案登记号的用途与流程:https://www.kjdsnews.com/a/1359154.html
了解商标国际申请的费用标准:https://www.kjdsnews.com/a/1359155.html
了解商标国际申请的几种有效途径:https://www.kjdsnews.com/a/1359156.html
了解商标国际注册的基本概念:https://www.kjdsnews.com/a/1359157.html
了解国际商标的优先使用权:https://www.kjdsnews.com/a/1360145.html
海南岛琼海市旅游景点 琼海市的旅游景点:https://www.vstour.cn/a/363189.html
月活用户超20亿!万亿市值巨头对中国商家进一步开闸放流 :https://www.kjdsnews.com/a/1836412.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流