HTML5 拖放、拖放到div追加、拖放到div删除

设置元素为可拖放

首先，为了使元素可拖动，把 draggable 属性设置为 true ：

<div id="box1" draggable="true"></div>

源对象（即需要拖动的对象）有三个事件：

ondragstart ondrag ondragend

box1.ondragstart = function () {
    console.log("开始拖动");
}

box1.ondrag = function () {
    console.log("拖动中");
}

box1.ondragend = function () {
    console.log("拖动结束");
}

目标对象（即将源对象拖动到的指定对象）有四个事件

ondragenter ondragover ondragleave ondrop

box2.ondragenter = function () {
    console.log("进入目标对象");
}

box2.ondragover = function (event) {
    console.log("在目标对象内拖动");

    // 阻止默认事件
    event.preventDefault();
}

box2.ondragleave = function () {
    console.log("离开目标对象");
}

box2.ondrop = function () {
    console.log("在目标对象内释放");
	// PS: 此事件必须保证ondragover事件阻止默认事件
}

两个方法：

dataTransfer.setData() 方法设置被拖数据的数据类型和值。


dataTransfer.getData() 方法获得被拖的数据。该方法将返回在 setData()方法中设置为相同类型的任何数据。

拖放到div中

// 开始拖动时获取源对象的id
box1.ondragstart = function (event) {
    console.log("开始拖动");

    event.dataTransfer.setData("id", event.target.id);//设置数据, 获取目标对象id，并命名为id
    // console.log(event.target.id)
}
    
box2.ondragover = function (event) {
    // console.log("在目标对象内拖动");

    // 阻止默认事件
    event.preventDefault();
}

// 在目标对象内释放时，将div添加到目标对象中
box2.ondrop = function (event) {
    // console.log("在目标对象内释放");

    var id = event.dataTransfer.getData("id"); //获取数据，根据setData设置的id名称获取数据

    // 把id=..的元素追加到盒子中
    var div = document.getElementById(id);  // 此时id为变量id
    box2.appendChild(div);
}

拖放到div删除(图片回收站效果)

<!-- 回收站 -->
<div id="recycle"></div>

<!-- 图片 -->
<div class="imgbox">
    <img src="img/001.jpg" alt="" class="img" draggable="true">

    <img src="img/002.jpg" alt="" class="img" draggable="true">

    <img src="img/003.jpg" alt="" class="img" draggable="true">
</div>

JS代码：

// 获取页面元素
var recycle = document.getElementById("recycle");
var img = document.getElementsByClassName("img");

// 定义添加下标函数
function addIndex() {
    // 给图片添加下标
    for (var i = 0; i < img.length; i++) {
        img[i].index = i;
    }
}

// 调用添加下标函数
addIndex();

// for循环为图片添加开始拖动事件
for (var i = 0; i < img.length; i++) {
    // 开始拖动事件
    img[i].ondragstart = function (event) {
        // console.log("开始拖动");

        event.dataTransfer.setData("index", event.target.index);//设置数据，获取图片的下标
    }
}


recycle.ondragover = function (event) {
    // 阻止默认事件
    event.preventDefault();
}


// 回收站，拖拽删除图片
recycle.ondrop = function (event) {
    // console.log("在目标对象内释放");

    var index = event.dataTransfer.getData("index"); //获取数据,根据设置的数据名获取数据
    
    // 删除图片
    img[index].remove();

    // 重新添加下标，因为删除后img个数减少，不能根据原下标找到对应的图片了
    addIndex();
}