摘要:本篇教程探讨了HTML5+CSS3从入门到精通之drag & drop 拖拽与拖放,希望阅读本篇文章以后大家有所收获,帮助大家对相关内容的理解更加深入。
本篇教程探讨了HTML5+CSS3从入门到精通之drag & drop 拖拽与拖放,希望阅读本篇文章以后大家有所收获,帮助大家对相关内容的理解更加深入。
<
1. draggable:规定元素是否可拖动的,draggable=true可拖动
2. dataTransfer:拖拽对象用来传递的媒介,使用方式:event.dataTransfer
3. ondragstart:拖拽元素被拖拽时触发的事件,作用于被拖拽元素
4. ondragenter:拖拽元素进入目标元素时触发的事件,作用于目标元素
5. ondragover:拖拽元素在目标元素移动触发的事件,作用于目标元素
6. ondrop:拖拽的元素在目标元素上同时鼠标放开触发的事件,作用于目标元素上
7. ondragend:拖拽完成后触发的事件,作用于被拖拽元素上
实例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>拖拽</title>
<style type="text/css">
#rectangle {width:350px;height:70px;padding:10px;border:1px solid #000;}
</style>
</head>
<body>
<div id="rectangle"></div>
<p id="word" draggable="true">这是一段可移动的段落,请把该段落拖入上面的矩形进行测试</p>
<script type="text/javascript">
let rectangle = document.getElementById('rectangle'),
word = document.getElementById('word');
word.ondragstart = (e) => {
e.dataTransfer.setData("Text",e.target.id);
};
rectangle.ondragenter = (e) => {
word.style.color = '#e1453c';
};
//ev.preventDefault() 方法:阻止默认的些事件方法等执行。在ondragover中一定要执行preventDefault(),否则ondrop事件不会被触发。
另外,如果是从其他应用软件或是文件中拖东西进来,尤其是图片的时候,默认的动作是显示这个图片或是相关信息,并不是真的执行drop。
此时需要用用document的ondragover事件把它直接干掉。
rectangle.ondragover = (e) => {
e.preventDefault();
};
rectangle.ondrop = (e) => {
let data=e.dataTransfer.getData("Text");
e.target.appendChild(document.getElementById(data));
e.preventDefault();
};
word.ondragend = (e) => {
document.getElementById('word').style.color = '#3cf078';
};
</script>
</body>
</html>
本文由职坐标整理发布,学习更多的相关知识,请关注职坐标IT知识库!
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了,明天再试试吧!
我们会在第一时间安排职业规划师联系您!
您也可以联系我们的职业规划师咨询:
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
沪公网安备 31011502005948号