html5新特性拖放（拖拽）

旧城等待， 2023-06-25 15:26 12阅读 0赞

## html5新特性拖放（拖拽） ##

**定义**  
抓取对象以后拖放到另一个位置。目前，它是HTML5标准的一部分。

**拖放的流程对应的事件**

选中  --->  拖动  ---> 释放

**选中**  
在HTML5标准中，为了使元素可拖动，把draggable属性设置为true。  
文本、图片和链接是默认可以拖放的，它们的draggable属性自动被设置成了true。  
图片和链接按住鼠标左键选中，就可以拖放。  
文本只有在被选中的情况下才能拖放。如果显示设置文本的draggable属性为true，按住鼠标左键也可以直接拖放。

draggable属性：设置元素是否可拖动。  
语法：

1.true: 可以拖动  
2.false: 禁止拖动  
3.auto: 跟随浏览器定义是否可以拖动

**拖动**

<table> 
 <thead> 
  <tr> 
   <th>针对对象</th> 
   <th>事件</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>拖动的元素</td> 
   <td>dragstart</td> 
   <td>在元素开始被拖动时候触发</td> 
  </tr> 
  <tr> 
   <td></td> 
   <td>drag</td> 
   <td>在元素被拖动时反复触发</td> 
  </tr> 
  <tr> 
   <td></td> 
   <td>dragend</td> 
   <td>在拖动操作完成时触发</td> 
  </tr> 
  <tr> 
   <td>目的地对象</td> 
   <td>dragenter</td> 
   <td>当被拖动元素进入目的地元素所占据的屏幕空间时触发</td> 
  </tr> 
  <tr> 
   <td></td> 
   <td>dragover</td> 
   <td>当被拖动元素在目的地元素内时触发</td> 
  </tr> 
  <tr> 
   <td></td> 
   <td>dragleave</td> 
   <td>当被拖动元素没有放下就离开目的地元素时触发</td> 
  </tr> 
  <tr> 
   <td></td> 
   <td>drop</td> 
   <td>当被拖动元素在目的地元素里放下时触发，一般需要取消浏览器的默认行为。</td> 
  </tr> 
 </tbody> 
</table>

dragenter和dragover事件的默认行为是拒绝接受任何被拖放的元素。因此，我们必须阻止浏览器这种默认行为。e.preventDefault();

例子：

<!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport"
              content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <script src="jquery-3.2.1.js"></script>
        <style>
            *{
                padding: 0;
                margin: 0;
            }
            .main{
                border: 1px solid red;
                width: 100%;
                height: 120px;
                padding: 10px 0 ;
            }
            .box{
                width: 100px;
                height: 100px;
                background:palegreen;
                float: left;
                text-align: center;
                line-height: 100px;
                margin-left: 5px;
            }
            .second{
                width: 100%;
                border: 1px solid #efefef;
                height: 130px;
            }
        </style>
    </head>
    <body>
    <script>
        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");
            console.log(ev.target.id)
    		//刚开始的时候我没有判断 就导致拖动的元素被作为子元素添加到了其他的盒子里面 所以就不显示 或者页面乱
            //在这里判断了一下元素托到的位置是在原来的盒子里面 还是另一个盒子里面
            if(ev.target.id=="foot" || ev.target.id=="top" ){
            //表示元素被拖到了另一个盒子中  不在原本的盒子中  appendChild
                ev.target.appendChild(document.getElementById(data));
            }else{
            //在原本的盒子中转换位置  aftert
                ev.target.after(document.getElementById(data));
            }
        }
    </script>
            							
    <ul class="main" id="top" ondrop="drop(event)" ondragover="allowDrop(event)">
    										
        <li class="box" id="1"  draggable="true" ondragstart="drag(event)">1</li>
        <li class="box"  id="2" draggable="true" ondragstart="drag(event)">2</li>
        <li class="box"  id="3" draggable="true" ondragstart="drag(event)">3</li>
    </ul>
    <ul class="second" id="foot" ondrop="drop(event)" ondragover="allowDrop(event)">
    
    </ul>
    
    </body>
    </html>