HTML标签 - 拖放 - 《学习 Web 前端》

拖放（Drag 和 Drop）是很常见的特性。它指的是您抓取某物并拖入不同的位置。
拖放是 HTML5 标准的组成部分：任何元素都是可拖放的。

demo:

<!DOCTYPE html>
<html>
<meta charset="utf-8" />
<style>
    #drop{
        width: 150px;
        height: 150px;
        border: #000 1px solid;
    }
</style>
<script>
    function allowDrop(e) {
        e.preventDefault();
        console.info("拖到了这里")
    }
    function drag(ev) {
        console.info("开始drag拖动")
        ev.dataTransfer.setData("text", ev.target.id);
    }
    function drop(ev) {
        ev.preventDefault();
        var data = ev.dataTransfer.getData("text");
        ev.target.appendChild(document.getElementById(data));
        console.info("放好了")
    }
</script>
<body>
    <section id="drag"  draggable="true" ondragstart="drag(event)">
        把我拖走
    </section>
    <section id="drop" ondrop="drop(event)" ondragover="allowDrop(event)">
        放到这里
    </section>
</body>
</html>

上面是两个section元素，id为drag的元素被拖动，放置到id为drop的元素中，

使用draggable把元素设置为可拖放

<section id="drop" draggable="true">

ondragstart：开始拖动时调用drag方法

ondragover：id为drag的元素被拖动到了id为drop的元素上方时，调用allowDrop方法

ondrop：放置完成时调用drop方法

来回拖放

<!DOCTYPE html>
<html>
<meta charset="utf-8" />
<style>
    section{
        width: 150px;
        height: 150px;
        border: #000 1px solid;
    }
</style>
<script>
    function allowDrop(e) {
        e.preventDefault();
        console.info("拖到了这里")
    }
    function drag(ev) {
        console.info("开始drag拖动")
        ev.dataTransfer.setData("text", ev.target.id);
    }
    function drop(ev) {
        ev.preventDefault();
        var data = ev.dataTransfer.getData("text");
        ev.target.appendChild(document.getElementById(data));
        console.info("放好了")
    }
</script>
<body>
    <section id="box1"  ondrop="drop(event)" ondragover="allowDrop(event)">
    </section>
    <p id="drag" draggable="true" ondragstart="drag(event)">把我拖走</p>
    <section id="box2" ondrop="drop(event)" ondragover="allowDrop(event)">
    </section>
</body>
</html>