html5拖拽上手

最新推荐文章于 2022-10-11 16:50:53 发布

Kim丶

最新推荐文章于 2022-10-11 16:50:53 发布

阅读量130

点赞数

分类专栏： web 文章标签： html5 html5拖拽拖拽事件

本文链接：https://blog.csdn.net/u010689561/article/details/88046570

版权

web 专栏收录该内容

22 篇文章 1 订阅

订阅专栏

注意：
Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。
注释：在 Safari 5.1.2 中不支持拖放。

设置拖拽元素

draggable属性是用于是否把元素设置为拖拽元素

<p id="one" draggable="true">这是一个可以拖拽的p标签</p>

拖拽事件

ondragstart
- 当鼠标开始拖拽被拖拽元素时触发
ondragend
- 鼠标在拖放被拖拽元素时触发
ondrag
- 当鼠标拖动被拖拽元素时一直触发
ondragleave
- 拖拽时鼠标移出目标元素时在目标元素上触发
ondragover
- 拖拽被拖拽元素时鼠标在目标元素上移动时触发.监听器通过阻止浏览器默认行为设置元素为可拖放元素
ondragenter
- 当拖拽被拖拽元素时鼠标进入目标元素上时触发
ondrop
- 在目标元素释放被拖拽元素时触发

函数event对象属性

ev.target
- 取的时被拖拽元素的DOM对象
ev.dataTransfer
- 可以用来保存被拖动的数据
- 注意：在ondrop可以获取数据，但在其它的事件(如ondragover、ondragleave等），是无法获取dataTransfer里面的值了。这是由于W3C要求对dataTransfer里的值进行保护。

案例(此处没有封装，所有很多冗余代码)：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #main {
            width: 300px;
            height: 200px;
            border: 1px solid #000000;
        }

        #targetDiv {
            width: 300px;
            height: 200px;
            border: 1px solid #000;
            margin-top: 30px;
        }
    </style>
</head>
<body>
<div id="main">
    <p id="one" draggable="true">这是一个可以拖拽的p标签</p>
    <p id="two" draggable="true">这也是一个可以拖拽的p标签</p>
</div>
<div id="targetDiv">

</div>

<script>
    // 当鼠标开始拖拽被拖拽元素时触发
    document.getElementById("main").ondragstart = function (ev) {
        // ev.target 获取的时被拖拽元素的DOM对象
        ev.target.style.opacity = '0';
        // dataTransfer对象可以用来保存被拖动的数据，保存方式为键值对
        ev.dataTransfer.setData('domID', ev.target.id);
    }

    document.getElementById('main').ondragend = function (ev) {
        // 鼠标在拖放被拖拽元素时触发
        ev.target.style.opacity = '1';

    }

    // 当鼠标拖动被拖拽元素时一直触发
    document.getElementById('main').ondrag = function (ev) {

    }

    // 拖拽时鼠标移出目标元素时在目标元素上触发
    document.getElementById('main').ondragleave = function (ev) {

    }

    // 拖拽时鼠标移出目标元素时在目标元素上触发
    document.getElementById('main').ondragover = function (ev) {
        ev.preventDefault();
    }


    document.getElementById('main').ondrop = function (ev) {
        let domID = ev.dataTransfer.getData('domID');
        this.appendChild(document.getElementById(domID));
    }

    // 当鼠标开始拖拽被拖拽元素时触发
    document.getElementById("targetDiv").ondragstart = function (ev) {
        // ev.target 获取的时被拖拽元素的DOM对象
        ev.target.style.opacity = '0';
        // dataTransfer对象可以用来保存被拖动的数据
        ev.dataTransfer.setData('domID', ev.target.id);
    }

    // 拖拽被拖拽元素时鼠标在目标元素上移动时触发.监听器通过阻止浏览器默认行为设置元素为可拖放元素.
    document.getElementById('targetDiv').ondragover = function (ev) {
        ev.preventDefault();
    }

    // 当拖拽被拖拽元素时鼠标进入目标元素上时触发
    document.getElementById('targetDiv').ondragenter = function (ev) {

    }

    // 在目标元素释放被拖拽元素时触发
    document.getElementById('targetDiv').ondrop = function (ev) {
    	// 从ev.dataTransfer中获取数据
        let domID = ev.dataTransfer.getData('domID');
        this.appendChild(document.getElementById(domID));
    }

    // 在目标元素释放被拖拽元素时触发
    document.getElementById('targetDiv').ondragleave = function (ev) {

    }

    document.getElementById('targetDiv').ondragend = function (ev) {
        ev.target.style.opacity = '1';
    }
</script>
</body>
</html>