dragable:
默认值为false,可以用于拖拽，但是一个虚拟的。a标签，img标签默认自带拖拽，(只有chrome,safari可以使用，
firefox不支持，ie不支持),
所有的标签元素，当拖拽周期结束后，默认事件就是回到原处，
事件是由行为触发的，但是一个行为不止可以触发一个事件，可以触发多个事件
拖拽周期： 拖拽开始，拖拽进行中，拖拽结束
拖拽的组成： 被拖拽的物体， 目标区域
被拖拽的物体：事件：ondragstart：拖拽开始事件， 拖拽开始需要移动一点才会触发，鼠标按下不会触发，e.dataTransfer,effectAllowed = ‘link’,还可以填写all, move, copy,linkMove
拖拽进去目标区域鼠标的样式
ondrag: 移动触发的事件
ondragend: 拖拽结束事件，松手触发
目标区域：接受拖拽的物体，事件：ondragenter: 不是元素图形进入触发，而是鼠标进去才能触发 ondragover: 拖拽物体在目标区域移动不停的触发 ondragleave: 鼠标带着物体离开目标区域触发 ondrop: 在ondragover里面加上e.prevenDefault()，阻止默认事件，就可以触发该事件，
e.dataTransfer.dropEffect = ‘link’,还可以填写all, move, copy,linkMove
设置拖拽放下的属性
实现一个小功能，使用拖拽，实现从左边拖拽到右边，然后从右边拖拽到左边，效果如下：
源码如下：
css
```css <style> * { margin: 0; padding: 0; list-style: none; } :root, html, body { height: 100%; width: 100%; } .wrapper { width: 500px; height: 300px; margin: 50px auto; border: 1px solid #aaa; display: flex; justify-content: space-between; align-content: center; } .wrapper .left { width: 200px; height: 100%; border: 1px solid #bbb; } .wrapper .left ul { width: 100%; height: 100%; display: inline-block; } li { height: 50px; margin: 20px; background-color: #abcdef; } .wrapper .right { width: 200px; height: 100%; border: 1px solid #bbb; } .wrapper .right ul { width: 100%; height: 100%; display: inline-block; } </style>
结构如下： <!-- 结构 --> <div class="wrapper"> <div class="left"> <ul> <!-- draggable 为true标志着 元素可以为拖拽元素 --> <li draggable="true">1</li> <li draggable="true">2</li> <li draggable="true">3</li> </ul> </div> <div class="right"> <ul></ul> </div> </div>
js如下： <!-- js --> ```javascript (function () { var lis = document.getElementsByTagName('li'); var rightDom = document.getElementsByClassName('right')[0].getElementsByTagName('ul')[0]; var dragDom; // 每一个元素拖拽的时候 for (let key in lis) { if (lis.hasOwnProperty(key)) { const li = lis[key]; li.ondragstart = function (e) { dragDom = e.target; } } } // 拖拽的目标区域阻止默认事件 rightDom.ondragover = function (e) { e.preventDefault(); } // 拖拽放下的时候，默认触发ondragover, 所以要阻止默认和时间 rightDom.ondrop = function () { rightDom.appendChild(dragDom); dragDom = null; } // 让元素可以从右边拖拽到左边 var leftDom = document.getElementsByClassName('left')[0].getElementsByTagName('ul')[0]; leftDom.ondragover = function (e) { e.preventDefault(); } leftDom.ondrop = function () { leftDom.appendChild(dragDom); dragDom = null; } })()
