HTML5拖放实现逻辑及代码讲解
程序员文章站
2022-04-14 10:57:15
1.拖放实现逻辑
开始拖动 ===> 拖动中 ===> 拖动结束(放手)
ondragstart ===> ondragover ===> ondrop
ondragstar...
1.拖放实现逻辑
开始拖动 ===> 拖动中 ===> 拖动结束(放手)
ondragstart ===> ondragover ===> ondrop
ondragstart 绑定在需要被拖动的dom上
ondragover和ondrop绑定在接受被拖动dom进入的dom上
2.实例
单个dom的拖动
<!doctype html>
<html>
<head>
<title>drag</title>
<style type="text/css">
.wrapper{
width: 400px;
height: 200px;
padding: 10px;
border: 1px solid red;
}
.wrapper img{
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<p class="wrapper" ondragover="dragover(event)" ondrop="dragdrop(event)">
<img id="dragimg" src="./login.jpg" draggable="true" ondragstart="dragstart(event)">
</p>
<p class="wrapper" ondragover="dragover(event)" ondrop="dragdrop(event)">
</p>
</body>
<script type="text/javascript">
function dragstart (event) {
event.datatransfer.setdata('text', event.target.id);
}
function dragover(event) {
event.preventdefault();
}
function dragdrop(event) {
event.preventdefault();
var data = event.datatransfer.getdata('text');
event.target.appendchild(document.queryselector('#'+data));
}
</script>
</html>
多个dom的拖动
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>draglist</title>
<style type="text/css">
#left{
float: left;
border: 1px solid red;
}
#right{
float: right;
border: 1px solid blue;
}
#left,#right{
width: 300px;
min-height: 400px;
}
.images img{
max-width: 260px;
max-height: 300px;
}
</style>
</head>
<body>
<ul id="left">
<li id="img1" class="images" draggable="true"><img src="login.jpg"></li>
<li id="img2" class="images" draggable="true"><img src="loginu.png"></li>
<li id="img3" class="images" draggable="true"><img src="反馈.png"></li>
</ul>
<ul id="right">
<li id="img4" class="images" draggable="true"><img src="日落.png"></li>
<li id="img5" class="images" draggable="true"><img src="等待.png"></li>
<li id="img6" class="images" draggable="true"><img src="规则.png"></li>
</ul>
</body>
<script type="text/javascript">
window.onload = function () {
function mypreventdefault(event) {
if(event.preventdefault) {
event.preventdefault();
}else {
event.returnvalue = false;
}
}
function mydragover (event) {
mypreventdefault(event);
}
function mydragdrop (event) {
mypreventdefault(event);
var data = event.datatransfer.getdata('text');
console.log(data);
event.target.appendchild(document.getelementbyid(data));
}
function mydragstart(event) {
event.datatransfer.setdata('text', event.target.id);
}
var nodelist = document.queryselectorall('.images');
for (var i = 0; i < nodelist.length; i++) {
nodelist[i].addeventlistener('dragstart',mydragstart);
}
document.getelementbyid('right').addeventlistener('dragover', mydragover);
document.getelementbyid('right').addeventlistener('drop', mydragdrop);
document.getelementbyid('left').addeventlistener('dragover', mydragover);
document.getelementbyid('left').addeventlistener('drop', mydragdrop);
}
</script>
</html>