十一、拖拽

拖拽是html5新增的事件

拖拽时候的样式，有一个虚影：

11.1 拖拽事件

ondrag：拖拽事件

绑定方式：

<img src="imgs/1.png" id="first">
<script>
    // 获取元素
    var img = document.getElementById("first");

    // 添加拖拽事件
    img.ondrag = function(){
        console.log("拖拽");
    }

当拖拽图片的时候，会触发该事件，并且拖拽图片移动的时候，加快该事件的触发频率

11.2 ondragstart 拖拽开始

绑定方式：

// 拖拽开始
img.ondragstart = function(){
    console.log("拖拽开始");
}

当开始拖拽图片的时候，触发ondragstart事件，并且只触发一次

11.3 ondragend 拖拽结束

绑定方式：

// 拖拽结束
img.ondragend = function(){
    console.log("拖拽结束");
}

11.4 ondragenter 拖拽进入

绑定方式：

<img src="imgs/trash.jpg" id="trash">
var trash = document.getElementById("trash");
// 拖拽进入
trash.ondragenter = function(){
    console.log("拖拽进入");
}

11.5 ondragleave 拖拽离开

绑定方式：

// 拖拽离开
trash.ondragleave = function(){
    console.log("拖拽离开");
}

11.6 ondragover 悬浮事件

绑定方式：

// 悬浮
trash.ondragover = function(){
    console.log("悬浮中");
}

当拖拽时鼠标的位置进入到绑定元素“垃圾桶”时，触发ondragover事件，并且一直在触发

11.7 ondrop 丢弃事件

该事件有一个bug，想要给一个元素添加drop事件，必须给该事件添加ondragover事件，并且ondragover的默认事件，才可以执行drop事件

绑定方式：

// 悬浮
trash.ondragover = function(){
    console.log("悬浮中");
    // 要想执行丢弃事件，需要打开悬浮事件，同时阻止悬浮的默认事件发生
    return false;
}
// 丢弃事件
trash.ondrop = function(){
    console.log("丢弃");
}

11.8 案例 拖拽删除

11.8.1 一张图片拖拽删除

第一种方式：

// 第一种方案
var temp = null;

// 添加 ondragstart 事件
img.ondragstart = function(){
    console.log(this);  // this 指向 img
    temp = this;
}

// 添加 ondragover 事件并阻止默认事件
trash.ondragover = function(){
    return false;
}

// 添加 ondrop 事件
trash.ondrop = function(){
    // 删除图片元素  下树 temp的父节点 删除它自己
    temp.parentNode.removeChild(temp);
}

第二种方式：

应用dataTansfer原型上的方法：setData(), getData()

img.ondragstart = function(e){
    console.log(e);  
}

// 第二种方案
// 添加 ondragstart 事件
img.ondragstart = function(e){
    // console.log(e);  
    e.dataTransfer.setData("nnn", this.id);
}

// 添加 ondragover 事件并阻止默认事件
trash.ondragover = function(){
    return false;
}

// 添加 ondrop 事件
trash.ondrop = function(e){
    // console.log(e);
    var nnn = e.dataTransfer.getData("nnn");
    // console.log(nnn);  // 拖拽元素的id名
    var element = document.getElementById(nnn);  // element 设为 img 元素
    // 删除图片元素  下树 temp的父节点 删除它自己
    element.parentNode.removeChild(element);
}

11.8.2 多张图片拖拽删除

<img src="imgs/1.png" id="first">
<img src="imgs/2.png" id="second">
<img src="imgs/3.png" id="third">
<img src="imgs/erweima.jpg" id="erweima">
<img src="imgs/sf.jpg" id="sf">
<img src="imgs/thanks.png" id="thanks">
<img src="imgs/trash.jpg" id="trash">
<script>
    // 获取所有图片 并转为数组
    var imgs = [].slice.call(document.getElementsByTagName("img"));
    // 删除数组最后一项，并将其设为 trash
    var trash = imgs.pop();

    imgs.forEach(function(value, index){
        // 添加 ondragstart 事件
        value.ondragstart = function(e){
            // console.log(e);  
            e.dataTransfer.setData("nnn", this.id);
        }
    })

    // 添加 ondragover 事件并阻止默认事件
    trash.ondragover = function(){
        return false;
    }

    // 添加 ondrop 事件
    trash.ondrop = function(e){
        // console.log(e);
        var nnn = e.dataTransfer.getData("nnn");
        // console.log(nnn);  // 拖拽元素的 id 名
        // 推拽垃圾桶并丢弃会报错
        if (nnn){
            // 有 id 的执行下树删除  而 nnn 没有垃圾桶的 id 
            var element = document.getElementById(nnn);  // element 设为 img 元素
            // 删除图片元素  下树 temp的父节点 删除它自己
            element.parentNode.removeChild(element);
        }
    }