拖拽 | 不是第一

H5中，有个属性，draggable="true"，这个属性呢(默认false)，需要加在标签上，加上去该标签就可以拖动了
拖拽div的时候，能监听到三个事件


<style>
    .app {
        border: 1px solid #eedded;
        top: 300px;
        width: 800px;
        height: 800px;

        position: relative;
    }

    p {
        columns: 300px 3;
    }

    .t {

        width: 200px;
        height: 200px;
        background-color: pink;
        /* 为了拖拽 定位 */
        position: absolute;
        left: 0px;
        top: 0px;

        z-index: 1;
    }
</style>

<body>

    <div class="t" id='tt' draggable="true"></div>
    <div class="app">

    </div>

</body>

<script>
    var tt = document.getElementById('tt')

    var X = 0,
        Y = 0;

    //开始拖拽事件
    tt.ondragstart = function (e) {
        X = e.clientX; //记录鼠标点下的位置。(因为div的定位点，是左上角 0，0)
        Y = e.clientY;
    }
    //结束拖拽事件
    /*
    配合绝对定位
    */
    tt.ondragend = function (e) {
        var X1 = e.clientX - X; //结束的位置，减去鼠标点下的位置，那么得到的位置，就是div落下的位置。
        var Y1 = e.clientY - Y;
         
        tt.style.left = tt.offsetLeft + X1 + 'px'; //这里还需要加上 div当前的位置， 累加。 
        tt.style.top = tt.offsetTop + Y1 + 'px';
    }




    tt.ondrag = function (e) { //拖拽过程中的事件
        console.log('drag');
    }
</script>

配合指定容器(常用)

在指定容器内，才会触发的
ondragenter, ondragover, ondragleave, ondrop, 这四个事件呢，是绑定到，你要把拖拽的东西，放到那里去。

# 配合指定容器(常用)

配合指定容器(常用)