拖拽属性

**

针对对象 事件名称 说明
被拖动的元素 dragstart 开始被拖动触发，不是元素图形进行目标区域触发的，是鼠标指针进入时才触发的
drag 拖动时反复触发
dragend 拖拽完成时
目标对象 dragenter 进入目标对象
dragover 目标对象内
dragleave 拖动元素没有被放下就离开目标元素
drop 在目标元素放下（需要取消浏览器默认行为）


备注：方法中需要在加上 on 例如 **ondragstart.

所有的标签元素，当拖拽周期结束时，默认事件是回到原处。
阻止浏览器的默认行为，e.preventDefault()。
**


默认带拖拽属性**
a img 标签

拖拽的生命周期
1.拖拽开始，拖拽进行中，拖拽结束
2.被拖拽的物体，目标区域

clientX
clientY

简单实现 （注：pc端 移动端下面无法实现

  1. <style>
  2.   .a{
  3.       position: absolute;
  4.   }
  5. </style>
  6. <body>
  7.     <div class="a" draggable="true"></div>
  8.     <!-- 
  9.         按下物体的瞬间是不会触发事件的
  10.      -->
  11.     <script>
  12.         var oDrageDiv = document.getElementsByClassName("a")[0]
  13.         var beginX = 0
  14.         var beginY = 0
  15.         oDrageDiv.ondragstart = function (e) {
  16.             // console.log(e)
  17.             beginX = e.clientX
  18.             beginY = e.clientY
  19.         }
  20.         // oDrageDiv.ondrag = function(e){
  21.         //     console.log(e)
  22.         // }
  23.         oDrageDiv.ondragend = function (e) {
  24.             // console.log(e)
  25.             var x = e.clientX - beginX
  26.             var y = e.clientY - beginY
  27.             oDrageDiv.style.left = oDrageDiv.offsetLeft + x + "px"
  28.             oDrageDiv.style.top = oDrageDiv.offsetTop + y + "px"
  29.         }
  30.     </script>
  31. </body>

例子实现

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <style>
  9.         *{
  10.             margin: 0;
  11.             padding: 0;
  12.         }
  13.         .box1 {
  14.             position: absolute;
  15.             width: 150px;
  16.             height: auto;
  17.             border: 1px solid black;
  18.             padding-bottom: 10px;
  19.         }
  21.         .box2 {
  22.             position: absolute;
  23.             width: 150px;
  24.             min-height:100px ;
  25.             border: 1px solid black;
  26.             padding-bottom: 10px;
  27.             left: 300px;
  28.         }
  30.         li {
  31.             position: relative;
  32.             width: 100px;
  33.             height: 30px;
  34.             background: #abcdef;
  35.             margin: 10px auto;
  36.             list-style: none;
  37.         }
  38.     </style>
  39. </head>
  41. <body>
  42.     <div class="box1">
  43.         <ul>
  44.             <li>1</li>
  45.             <li>2</li>
  46.             <li>3</li>
  47.         </ul>
  48.     </div>
  49.     <div class="box2"></div>
  50.     <script>
  51.         var dragDom;
  53.         var liList = document.getElementsByTagName("li")
  54.         for(var i=0;i<liList.length;i++){
  55.             liList[i].setAttribute("draggable",true)
  56.             liList[i].ondragstart = function(e){
  57.                 dragDom = e.target
  58.                 console.log(e)
  59.             }
  60.         }
  62.         var box2 = document.getElementsByClassName("box2")[0]
  63.         box2.ondragover = function(e){
  64.             e.preventDefault();
  65.         }
  66.         box2.ondrop = function(e){
  67.             console.log(e)
  68.             box2.appendChild(dragDom)
  69.             dragDom = null
  70.         }
  72.         var box1 = document.getElementsByClassName("box1")[0]
  73.         box1.ondragover = function(e){
  74.             e.preventDefault();
  75.         }
  76.         box1.ondrop = function(e){
  77.             box1.appendChild(dragDom)
  78.             dragDom = null
  79.         }
  81.     </script>
  82. </body>
  84. </html>

http://jartto.wang/2017/10/23/html5-drag/

https://juejin.im/post/6844904040711585799

符合题意但是无法实现
原因：移动端不支持这个事件
https://segmentfault.com/a/1190000014572113