鼠标移动物体

EstherNi

已于 2023-04-18 16:59:25 修改

阅读量203

点赞数

分类专栏： html-css-js 文章标签： javascript html html5

于 2021-08-28 13:55:49 首次发布

本文链接：https://blog.csdn.net/EstherNi/article/details/119967278

版权

HTML5 JavaScript 拖放事件处理元素操作

关键词由CSDN通过智能技术生成

html-css-js 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

效果：
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .box{
            width: 300px;
            height: 300px;
        }
        #box{
            background-color: gray;
        }
        img{
        }
    </style>
    <script src="js.js"></script>
</head>
<body>
    <div id="box" class="box"></div>
    <div id="box1" class="box"></div>
    <img id="image" src="1.png">
    <div id="msg"></div>
</body>
</html>

JS：js.js

/**
 * Created by Doron on 16/6/24.
 */

var box1,img,boxMsg,box2;

window.onload= function (){

    box1 = document.getElementById("box");
    box2 = document.getElementById("box1");
    boxMsg = document.getElementById("msg");
    img = document.getElementById("image");
    // box1.ondragenter = function (e) {
    //
    //     meg(e);
    // }
    box1.ondragover = function (e) {
        e.preventDefault();
    }
    box2.ondragover = function (e) {
        e.preventDefault();
    }
    
    img.ondragstart = function (e) {
        e.dataTransfer.setData("imageID","image");
    }

    box1.ondrop = dadad;
    box2.ondrop = dadad;
}

function dadad(e) {
    meg(e.dataTransfer);
    e.preventDefault();
    var image = document.getElementById(e.dataTransfer.getData("imageID"));
    e.target.appendChild(image);
}

// 监听事件
function meg(obj) {
    var s = "";
    for(var k in obj){
        s += k+":"+obj[k]+"<br/>";
    }
    boxMsg.innerHTML = s;
}

IMG

在这里插入图片描述

EstherNi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
鼠标移动物体

效果：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> .box{ width: 300px; height: 300px; } #box
复制链接

扫一扫

专栏目录