原生H5实现拖拽

api基本用法

实现拖拽释放要先认清两个对象：被拖拽者，容器。

使用api的前提：被拖拽者先开启draggable="true"

被拖拽者的api

1. ondragstart：开始拖动元素的时候触发。
2. ondrag：正在拖拽时触发。
3. ondragend：结束拖动时触发。

容器的api

1. ondragenter：进入容器范围内触发。
2. ondragover：被拖动的对象在另一对象容器范围内拖动。
3. ondragleave：拖动的对象离开其容器范围内时触发。
4. ondrop：释放鼠标键时触发（需要提前取消默认事件，即在ondragover里使用e.preventDefault()，否则该方法不生效。）。

代码

<div id="obj" draggable="true">div>
    <br>
<div id="container">div>

#obj {
    width: 50px;
    height: 50px;
    border: 1px solid greenyellow;
}

#container {
    width: 100px;
    height: 100px;
    border: 1px dotted #000;
}

let obj = document.getElementById('obj')
let container = document.getElementById('container')

obj.ondragstart = function () {
    console.log("开始拖动");
}
obj.ondrag = function () {
    console.log("正在移动")
}
obj.ondragend = function () {
    console.log("结束拖动")
}

container.addEventListener('dragenter', () => {
    console.log("进入容器范围触发");
})
container.addEventListener('dragover', (e) => {
    e.preventDefault()
    console.log('被拖动的对象在另一对象容器范围内拖动。');
})
container.addEventListener('dragleave', () => {
    console.log('拖动的对象离开其容器范围内时触发。');
})
container.addEventListener('drop', () => {
    console.log('释放鼠标键时触发。');
})

两个案例

案例1：实现拖拽分组

方法：采用事件委托的思想监听左边的ul和右边的容器。

代码：

<div class="left">
    <ul class="left-ul">
        <li draggable="true">htmlli>
        <li draggable="true">cssli>
        <li draggable="true">vueli>
        <li draggable="true">reactli>
    ul>
div>
<div class="right">
    <ul class="right-ul">ul>
div>

.left {
    width: 200px;
    height: 200px;
    border: 1px solid #000;
    float: left;
}

.left-ul li {
    list-style: none;
    background-color: red;
    text-align: center;
    margin-bottom: 20px;
    margin-left: -40px;
}

.right-ul li {
    list-style: none;
    background-color: red;
    text-align: center;
    margin-bottom: 20px;
    margin-left: -40px;
}

.right {
    width: 200px;
    height: 200px;
    border: 1px solid #000;
    float: left;
    margin-left: 200px;
}

// 获取左边的ul
let left_ul = document.getElementsByClassName('left-ul')[0]
// 获取右边的盒子
let right = document.getElementsByClassName('right')[0]
// 获取右边的ul
let right_ul = document.getElementsByClassName('right-ul')[0]
// 获取被拖拽的目标
let obj = null
// 对左边的ul添加监听事件
left_ul.addEventListener('dragstart', (e) => {
    e = e || window.target
    console.log(e.target)
    // 给目标对象赋值
    obj = e.target
})
// 右边的盒子监听并阻止默认事件
right.addEventListener('dragover', (e) => {
    e.preventDefault()
})
// 右边盒子监听鼠标键是否松开，松开的话就给右边的ul添加li
right.addEventListener('drop', (e) => {
    console.log(obj)
    right_ul.appendChild(obj)
})

效果：左边的li可以被拖拽到右边的容器里。

案例2：实现拖拽删除

方法：同样通过事件委托方式监听左边的ul和右边的容器。

代码：

<div class="left">
    <ul class="left-ul">
        <li draggable="true">htmlli>
        <li draggable="true">cssli>
        <li draggable="true">vueli>
        <li draggable="true">reactli>
    ul>

div>
<div class="right">
    <p>垃圾箱p>
div>
<p class="title">删除值为：p>

.left {
    width: 200px;
    height: 200px;
    border: 1px solid #000;
    float: left;
}

.left-ul li {
    list-style: none;
    background-color: red;
    text-align: center;
    margin-bottom: 20px;
    margin-left: -40px;
}

.right {
    width: 200px;
    height: 200px;
    border: 1px solid #000;
    float: left;
    margin-left: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
}
.title{
    clear: both;
}

// 获取左边的ul
let left_ul = document.getElementsByClassName('left-ul')[0]
// 获取右边的盒子
let right = document.getElementsByClassName('right')[0]

let cur = document.getElementsByClassName('title')[0]
// 获取被拖拽的目标
let obj = null
// 对左边的ul添加监听事件
left_ul.addEventListener('dragstart', (e) => {
    e = e || window.target
    console.log(e.target)
    // 给目标对象赋值
    obj = e.target
})

right.addEventListener('dragenter',(e) => {
    console.log(e.target)
    e.target.innerHTML = '准备删除'
})

right.addEventListener('dragleave', (e) => {
        console.log(e.target)
        e.target.innerHTML = '垃圾箱'
    })

// 右边的盒子监听并阻止默认事件
right.addEventListener('dragover', (e) => {
    e.preventDefault()    
})
// 右边盒子监听鼠标键是否松开，松开的话就给右边的ul添加li
right.addEventListener('drop', (e) => {
    console.log(obj.innerHTML)
    obj.remove()
    e.target.innerHTML = '垃圾箱'
    cur.innerHTML = '删除值为：' + obj.innerHTML
})

效果：左边的li拖动到垃圾箱时（不放手），垃圾箱变为准备删除。若离开了垃圾箱，准备删除变为垃圾箱。若在垃圾箱范围内放手，会有删除效果，同时展示删除值。

总结

通过两个案例，可以学会H5新增的拖拽api的基本用法，同时大家也可以使用该api实现文件拖拽上传到后台服务器的功能。

拖拽功能不仅可以使用原生H5实现，还可以使用vue的插件----vue-draggable实现。