摘要:本篇教程探讨了HTML5代码学习(10)拖放,希望阅读本篇文章以后大家有所收获,帮助大家HTML5+CSS3从入门到精通 。
本篇教程探讨了HTML5代码学习(10)拖放,希望阅读本篇文章以后大家有所收获,帮助大家HTML5+CSS3从入门到精通 。
<
l元素可以用于拖拽必须设置draggable="true"属性,img和a标签除外,她们两个默认就可以被拖拽
想做拖拽处理,就需要在Dom元素上监听拖放的事件:dragstart,drag,dragenter,dragover,dragleve,drop,dragend
在文档中,默认document最先触发以上事件,而默认的处理是阻止页面元素的变化,想人为的控制拖拽的元素的变化需要我们改动代码。所有必需去掉document的默认处理
document.ondragover = function(e) {
e.preventDefault();
};
document.ondrop = function (e) {
e.preventDefault();
};
拖拽事件event中属性:dataTransfer是传递数据的关键。使用dataTransfer的setData(“Text",data)方法,把要拖拽的数据放到dataTransfer中,在拖拽完毕的事件中,再从中取出数据,用方法:getData("text/plain");
复制代码
<!DOCTYPE html>
<html xmlns="//www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style>
#d1, #d2 {
width:200px;
height:200px;
border:1px solid gray;
float:left;
margin-right:20px;
}
</style>
<script>
function drag(e) {
e.dataTransfer.setData("Text", e.target.id);
}
function dragover(e) {
e.preventDefault();
}
function move1(e) {
e.preventDefault();
var id = e.dataTransfer.getData("Text");
e.target.appendChild(document.getElementById(id));
}
</script>
</head>
<body>
<div id="d1" ondragover="dragover(event)" ondrop="move1(event)">
<img id="i1" src="ts.gif" draggable="true" ondragstart="drag(event)" /><br />
<a id="Img1" draggable="true" ondragstart="drag(event)">把我也拖走吧!</a>
</div>
<div id="d2" ondragover="dragover(event)" ondrop="move1(event)"></div>
</body>
</html>
本文由职坐标整理并发布,希望对同学们有所帮助。了解更多详情请关注职坐标WEB前端HTML5/CSS3频道!
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了,明天再试试吧!
我们会在第一时间安排职业规划师联系您!
您也可以联系我们的职业规划师咨询:
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
沪公网安备 31011502005948号