3.04.12draggable，触屏，全屏，网络变化，定位

最新推荐文章于 2023-03-20 17:51:03 发布

以哲_ok

最新推荐文章于 2023-03-20 17:51:03 发布

阅读量321

点赞数 1

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/m0_59593735/article/details/125231817

版权

3.04.12 draggable，触屏，全屏，网络变化，定位

1.draggable属性

使得元素拖拽时作出行为
拖动的标签需要添加属性 draggable=“true” ,否则不具有拖动的行为
img 标签不用设置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>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: red;
        }
        img {
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <!-- 拖动不是移动，千万不要和mousedown mousemove mouseup的行为混在一起来理解 -->
    <!-- 拖动的标签需要添加属性 draggable="true" ,否则不具有拖动的行为-->
    <!-- img 标签不用设置draggable="true" ,默认就是允许拖动的 -->
    <div class="box" draggable="true"></div>
    <script>
        // 编码：
            var box = document.querySelector(".box");
        
            // 开始拖动(按下目标元素并开始拖动)
            box.ondragstart = function(){
                //console.log("ondragstart");
            }
            // 结束拖动(拖动目标元素并松开鼠标)
            box.ondragend = function(){
                //console.log("ondragend");
            }
            // 拖拽移入目标元素(拖动标签移入目标元素)
            box.ondragenter = function(){
                //console.log("ondragenter");
            }
            // 拖拽移出目标元素(拖动标签移出目标元素)
            box.ondragleave= function(){
                //console.log("ondragleave");
            }
            // 拖拽在目标元素上悬停
            box.ondragover = function(event){
                console.log("ondragover");
                // 阻止浏览器默认行为
                event.preventDefault();
            }
            // 拖动到目标元素上悬停后松开鼠标(结合ondragover行为)
            box.ondrop = function(){
                console.log("ondrop");
            }
            // 备注:
                // 以上事件是拖拽行为
                // 是PC端的