html的div拖拽打开页面等操作

2022-03-22

387次阅读

可以拖拽打开页面。其实大部分的浏览器自带的也能拖拽打开，这部分功能用的比较少，比如随便找一个网页，鼠标放在一个超链接上按住往浏览器的新建标签页拖拽也是能够在新的页面打开这个链接的。

而这个代码是给网页的div（也可以给其他标签添加这个属性）增加进行拖拽功能。

目标元素的事件监听：（应用于目标元素）

ondragenter 当拖拽元素进入时调用
ondragover 当拖拽元素停留在目标元素上时，就会连续一直触发（不管拖拽元素此时是移动还是不动的状态）
ondrop 当在目标元素上松开鼠标时调用
ondragleave 当鼠标离开目标元素时调用
draggable="true" 决定是否可以拖拽

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 可拖动的盒子 -->
    <div id="box" style="background-color: green;width: 300px;height: 300px;" draggable="true">
    </div>


    <script>
        var box = document.querySelector('#box');

        // 开始拖拽
        box.ondragstart = function(){
            console.log("拖拽开始...");
        }
        // 开始走动了
        box.ondragleave = function(){
            console.log("拖拽离开...");
        }

        // 拖拽结束后松手
        box.ondragend = function(){
            console.log("拖拽结束...");
        }
        // 有拖拽的行为
        box.ondrag = function(){
            console.log("行为");
        }
    </script>
</body>
</html>

一个层往另一个层拖拽，可覆盖可激活部分操作。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <style>
        .one{
            background-color: red;
            width: 200px;
            height: 200px;
        }
        .two{
            background-color:green;
            width: 200px;
            height: 200px;
        }
    </style>
    <div class="one" draggable="true"></div>
    <div class="two"></div>

    <script>
        var two = document.querySelector(".two");

        // 开始
        two.ondragenter = function(){
            console.log("开始");
        }

        two.ondragleave = function(){
            console.log("鼠标离开了");
        }

        two.ondragend = function(){
            console.log("结束了");
        }



        two.ondragover = function(e){
            e.preventDefault();
            console.log("over");
        }

        two.ondrop = function(){
            console.log("松开了鼠标");
        }

    </script>
</body>
</html>

下面的代码可以实现把一个层里面的内容拖拽到另一个层里面。

具体的效果可以参考在线运行的效果。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <style>
        .one {
            width: 400px;
            height: 400px;
            border: 1px solid #000;
        }

        .one>div,.two>div{
            width: 98px;
            height: 98px;
            border: 1px solid #000;
            border-radius: 50%;
            background-color: red;
            float: left;
            text-align: center;
            line-height: 98px;
        }

        .two {
            width: 400px;
            height: 400px;
            border: 1px solid #000;
            position: absolute;
            left: 600px;
            top: 200px;
        }
    </style>

    <div class="one">
        <div draggable="true">1</div>
        <div draggable="true">2</div>
        <div draggable="true">3</div>
        <div draggable="true">4</div>
        <div draggable="true">5</div>
        <div draggable="true">6</div>
    </div>

    <div class="two"></div>
</body>
<script>
    var boxs = document.querySelectorAll('.one div');
    //        临时的盒子 用于存放当前拖拽的元素

    var two = document.querySelector('.two');

    var temp = null;
    //         给8个小盒子分别绑定拖拽事件
    for (var i = 0; i < boxs.length; i++) {
        boxs[i].ondragstart = function () {
//                保持当前拖拽的元素
            temp = this;
            console.log(temp);
        }

        boxs[i].ondragend = function () {
//               当拖拽结束 ，清空temp
            temp = null;
            console.log(temp);
        }
    }

    //        目标元素的拖拽事件
    two.ondragover = function (e) {
//            阻止拖拽的默认行为
        e.preventDefault();
    }
    //        当在目标元素上松开鼠标是触发
    two.ondrop = function () {
//            将拖拽的元素追加到 two里面来
        this.appendChild(temp);
    }
</script>
</html>

正文结束