html5 -- 拖放

最新推荐文章于 2024-08-12 16:19:20 发布

阿渡渡渡渡渡渡

最新推荐文章于 2024-08-12 16:19:20 发布

阅读量91

点赞数

分类专栏： html/css 文章标签： html css js

本文链接：https://blog.csdn.net/qq_44867271/article/details/106623180

版权

html/css 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

首先，先了解一下拖放事件，运行以下代码，并结合控制台，你可以理解拖、放事件。

<!DOCTYPE HTML>
<html>

<head>
    <style type="text/css">
        #div1 {
            width: 530px;
            height: 300px;
            padding: 10px;
            border: 1px solid #aaaaaa;
        }
    </style>
</head>

<body>

    <p>请把图片拖放到矩形中：</p>

    <div id="div1"></div>
    <br />
    <img id="mydiv" src="这里随便添加一张图片" draggable="true"/>

    <script type="text/javascript">
        // 拖事件
        var mydiv = document.getElementById('mydiv');
        mydiv.ondragstart = function () {
            console.log('开始拖');
        }

        mydiv.ondrag = function () {
            console.log('正在拖');
        }

        mydiv.ondragend = function () {
            console.log('结束拖');
        }

        // 放事件
        var div1 = document.getElementById('div1');
        div1.ondragenter = function () {
            console.log('放入了');  //当鼠标带着要放的图片 进入容器盒子时，触发 dragenter 事件 
        }
        
        div1.ondragover = function (e) {
            console.log('放在上面'); //当鼠标带着要放的图片 进入盒子的区域，持续触发 dragover 事件
            e.preventDefault(); //阻止默认事件
        }

        // div1.ondragover = function () {
        //     console.log('放在上面');
        //     return false;
        // }

        div1.ondragleave = function () {
            console.log('出去了');  //当鼠标带着要放的图片  离开盒子的区域时，触发 dragleave 事件
        }

        div1.ondrop = function () {
            console.log('放下了');  //需要dragover 阻止默认事件，见注释
        }
    </script>
</body>
</html>

上面只是了解什么是拖、放事件，下面将实现真正的效果

<!DOCTYPE HTML>
<html>

<head>
    <style type="text/css">
        #div1 {
            width: 530px;
            height: 300px;
            padding: 10px;
            border: 1px solid #aaaaaa;
        }
    </style>
</head>

<body>

    <p>请把图片拖放到矩形中：</p>

    <div id="div1"></div>
    <br />
    <img id="mydiv" src="随便放一张图片" draggable="true"/>

    <script type="text/javascript">
        var mydiv = document.getElementById('mydiv');
        var div1 = document.getElementById('div1');

        div1.ondragover = function (e) {
            e.preventDefault();
        }
        
        div1.ondrop = function () {
            this.appendChild(mydiv);
        }
    </script>
</body>
</html>

以上代码实现了简单的拖放，但是对于这种只能拖放一个，因为ondrop事件写死了，只能放 mydiv，所以有如下的代码

<!DOCTYPE HTML>
<html>

<head>
    <style type="text/css">
        #big {
            width: 530px;
            height: 300px;
            padding: 10px;
            border: 1px solid #aaaaaa;
        }

        .mydiv {
            width: 50px;
            height: 50px;
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <div id="big"></div>
    <div id="div1" class="mydiv" draggable="true">1</div>
    <div id="div2" class="mydiv" draggable="true">2</div>
    <div id="div3" class="mydiv" draggable="true">3</div>
    <div id="div4" class="mydiv" draggable="true">4</div>
    <div id="div5" class="mydiv" draggable="true">5</div>

    <script>
        var mydivs = document.getElementsByClassName('mydiv');
        var big = document.getElementById('big');

        for(var i = 0; i < mydivs.length; i ++){
            mydivs[i].ondragstart = function (e) {
                // console.log(e.dataTransfer);  
                //每个拖拽事件都有dataTransfer 的属性，包含一些方法

                //拖的瞬间，存储id
                e.dataTransfer.setData('id',this.id)
            }
        }

        big.ondragover = function (e) {
            e.preventDefault(); //取消默认事件
        }

        big.ondrop = function (e) {
            // 获取之前存储的id
            var id = e.dataTransfer.getData('id')
            //根据id获取节点，然后添加进 big 
            var node = document.getElementById(id);
            this.appendChild(node)
        }
    </script>
</body>
</html>

动动手操作，你就能发现五个小方块，每个都能放进大盒子里面

阿渡渡渡渡渡渡

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html5 -- 拖放

首先，先了解一下拖放事件，运行以下代码，并结合控制台，你可以理解拖、放事件。<!DOCTYPE HTML><html><head> <style type="text/css"> #div1 { width: 530px; height: 300px; padding: 10px; border: 1px solid #aaaaaa;
复制链接

扫一扫

专栏目录