html5 h5 draggable的理解，及其實現拖拽功能

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;
        }
    })()