/ javascript

h5的拖拽事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .target {
            width: 30px;
            height: 30px;
            border: solid;
        }

        .container {
            width: 300px;
            height: 300px;
            border: solid;
        }
    </style>
</head>
<body>
<div class="target" draggable="true">
    target
</div>
<div class="container"></div>
</body>
</html>

<script>
    var target = document.getElementsByClassName('target')[0];
    var container = document.getElementsByClassName('container')[0];
    target.addEventListener('dragstart', function (e) {
        console.log("dragstart 拖拽开始,设置拖拽数据")
        // 使其半透明
        this.style.opacity = .5;
        //设置拖拽的数据
        e.dataTransfer.setData("text", '1');
    })
    target.addEventListener('drag', function (e) {
        console.log("拖拽  drag,")
        e.preventDefault();
    })
    container.addEventListener('dragover', function (e) {
        console.log("拖拽结束 dragover,当放置被拖数据时")
        e.preventDefault();
    })
    container.addEventListener('drop', function (e) {
        console.log("拖拽结束 drop,当放置被拖数据时")
        e.preventDefault();
        //取出数据
        var data = e.dataTransfer.getData("text");
        console.log(data)
        this.innerHTML = data
    })

    container.addEventListener("dragenter", function (e) {
        e.preventDefault();
        // 当可拖动的元素进入可放置的目标时高亮目标节点
        this.style.background = "purple";
    });
    container.addEventListener("dragleave", function (e) {
        e.preventDefault();
        // 当拖动元素离开可放置目标节点,重置其背景
        this.style.background = "";
    });
</script>

参考文章
https://developer.mozilla.org/zh-CN/docs/Web/API/Document/drag_event

1.要实现元素可以拖拽,需要设置元素属性 draggable="true"
2.有六个事件分别是:
dragstart 拖拽开始,设置拖拽的数据 e.dataTransfer.setData("text", 'data');
drag 拖拽中
dragenter 拖拽中,进入目标区
dragleave 拖拽中,离开目标区
dragover 拖拽介绍,需要阻止默认事件,不然无法生效
drop 放下拖拽物,取出数据 data = e.dataTransfer.getData("text")

也可以用onmousedown onmousemove onmouseup实现

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        #div1 {
            color: red;
            background: red;
            width: 300px;
            height: 300px;
            position: absolute;
        }
    </style>
</head>
  
<body>
<div id="div1">1</div>
</body>
</html>
<script>
    window.onload = function () {
        var div1 = document.getElementById("div1");
        div1.onmousedown = function (ev) {
            var oevent = ev || event;
            var distanceX = oevent.clientX - div1.offsetLeft;
            var distanceY = oevent.clientY - div1.offsetTop;
            document.onmousemove = function (ev) {
                var oevent = ev || event;
                div1.style.left = oevent.clientX - distanceX + 'px';
                div1.style.top = oevent.clientY - distanceY + 'px';
            };
            document.onmouseup = function () {
                document.onmousemove = null;
                document.onmouseup = null;
            };
        };
    }
</script>