html5 拖拽的简要介绍

2022-09-12 21:24:31

1，首先，你要告诉计算机那个元素可以拖动，或者是一张图，或者是一个盒子，在标签里面加上 draggable="true"

2，然后，监听该元素被拖动的函数 ondragstart="drag(event)"

3，drag 里面告诉计算机是那个元素被拖动的 ev.dataTransfer.setData("Text",ev.target.id);

4，接下来将拖动的元素放到哪个盒子，（或者是经过那个盒子，经过某个盒子的时候触法 ondragover 函数）当然了，这个盒子要告诉计算机，我是个盒子，可以把东西放我这里 ev.preventDefault(); 这句的意思就是说计算机别限制我“禁止”拖动

5，当鼠标松开的时候触发事件 ondrop="drop(event)" ，这个函数里面介绍是谁被拖动的ev.dataTransfer.getData("Text");，放到了哪里ev.target ，就把被拖动的元素插入这个盒子里面，ev.target.appendChild(document.getElementById(data)); 效果就实现了。

6，这个是我自己的理解，有不对的欢迎指正。

下面，是简单的源码

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#div1 {width:488px;height:370px;padding:10px;border:1px solid #aaaaaa;}
#div2 {width:488px;height:370px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script type="text/javascript">

function allowDrop(ev){
    ev.preventDefault();
       
    }

function drag(ev){
    ev.dataTransfer.setData("Text",ev.target.id);
    }
function drop(ev){
    ev.preventDefault();
    var data = ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));    
}
</script>
<meta charset="utf-8">
</head>
<body>

<p>请把 W3School 的图片拖放到矩形中：</p>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

<br />


<img id="drag2" src="images/001(2)_01.jpg" draggable="true" ondragstart="drag(event)"  width="460" height="221" />

</body>
</html>

上面这个是基本的这种功能，其实拖放有很强大的功能，本吊也仅仅知道其中的一小部分，下面贴一个稍微复杂点的应用

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>

<style>
*{ margin:0; padding:0}
.mask { position:fixed; width:100%; height:100%; background-color:rgba(0,0,0,.4); top:0px; left:0px;}
.mask_footer { width:300px; height:220px; position:relative; left:50%; top:50%; background-color:#fff; border:solid 1px  #ccc ; margin-left:-150px; margin-top:-100px;}
.title {
    background-color: #960;
    color: #fff;
    height:30px; line-height:30px;
    cursor:move;
}
.close { width:20px; height:20px; font-size:18px; position:absolute; right:5px; top:5px; cursor:pointer;}
.close:hover { color:#fff;}
#but { width:200px; height:40px;}
</style>
</head>

<body>

<button type="button" value="test" id="but" >test</button>

<div class="mask" ondrop="drop(event)" ondragover="allowDrop(event)">
  <div class="mask_footer" id="testid" >
          <span class="close">×</span>
        <h3 class="title" draggable="true" draggable="true"  ondragstart="drag(event)" >点击我可以移动位置</h3>
        <div>文本内容》。。。、</div>
  </div>
</div>

<script>
var but =document.getElementById("but");
var mask = document.getElementsByClassName("mask")[0];
var clos = document.getElementsByClassName("close")[0];
but.addEventListener("click",show);
clos.addEventListener("click",hide);
var nowx , nowy ;
function show(){
    
    mask.style.display = "block ";    
}
function hide (){
    mask.style.display = "none";    
    
    }
function allowDrop(ev){
    ev.preventDefault();
       
    }
function drag(ev){
    var dragId = ev.target.parentNode.id;
    var dragImg = document.getElementById(dragId);
    ev.target.offsetX;
    var yuanX =  ev.target.parentNode.offsetLeft ;
    var yuanY =  ev.target.parentNode.offsetTop ;
    nowx =ev.clientX ;
    nowy =ev.clientY ;
    nowx = nowx - yuanX ;
    nowy = nowy - yuanY;
    ev.dataTransfer.setData("Text",dragId);
    ev.dataTransfer.setDragImage(dragImg,nowx,nowy);
    }
function drop(ev){
    ev.preventDefault();
    var data = ev.dataTransfer.getData("Text");
    
    var dX = ev.clientX -nowx;
    var dY = ev.clientY -nowy ;
    var ele = document.getElementById(data);
    ele.style.left = dX +"px";
    ele.style.top = dY +"px";
    ele.style.marginLeft=  "0px";
    ele.style.marginTop = "0px";
}

</script>
</body>
</html>

这个是模仿百度登陆框做的一个功能，当然了，也很普通。

html5 拖拽的简要介绍,布布扣,bubuko.com

html5 拖拽的简要介绍

码农公寓

相关文章