HTML5 拖放图片

最新推荐文章于 2021-12-17 18:00:00 发布

凌冰_

最新推荐文章于 2021-12-17 18:00:00 发布

阅读量656

点赞数

分类专栏： HTML5

本文链接：https://blog.csdn.net/hlx20080808/article/details/62217670

版权

HTML5 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

(1)将图片拖动到层中

(2)图片先拖动到第一个层

(3)在第一个层中拖动到第二个层中

(4)实现代码

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>拖放</title>
    <style>
        /* div的大小 */
        .box{
            width:200px;
            height: 200px;
        }
        /* div1的背景色 */
        #box1{
            background-color: #3a87ad;
            float: left;
        }
        /* div2的背景色 */
        #box2{
            background-color:#B1D7A1;
            float: left;
        }
    </style>
   <!-- 调用脚本-->
    <script src="my.js"></script>
</head>
<body>
<div id="box1" class="box"></div>
<div id="box2" class="box"></div>
<img id="img1" src="images/24.gif"/>
<div id="msg"></div>
</body>
</html>

（5）脚本代码

var box1Div,msgDiv,img1,box2Div;
//加载事件
window.οnlοad=function(){
    //获得当前div
    box1Div= document.getElementById("box1");
    msgDiv = document.getElementById("msg");
    img1= document.getElementById("img1");
    box2Div= document.getElementById("box2");

    //监听事件
    //box1Div.οndragenter=function(e){
    // //调用方法
    //    showObj(e);
    //}

    
    //放入位置事件 (必须要写，否则不能拖动哦)
    box1Div.οndragοver=function(e){
        e.preventDefault();  //阻止系统默认的
    }
    //放入位置事件 (必须要写，否则不能拖动哦)
    box2Div.οndragοver=function(e){
        e.preventDefault();  //阻止系统默认的
    }
//
    //图片拖动开始
    img1.οndragstart=function(e) {
        e.dataTransfer.setData("imgID", "img1");
    }


    //拖动事件
    box1Div.οndrοp=dropImgHandler;
    box2Div.οndrοp=dropImgHandler;
}

//拖动事件方法
function dropImgHandler(e){
    showObj(e.dataTransfer);
    e.preventDefault();
    //获得节点
    var img = document.getElementById(e.dataTransfer.getData("imgID"));
    //固定添加到div
    //box1Div.appendChild(img);

    //目标
    e.target.appendChild(img);
}

//显示对象
function showObj(obj){
    var s ="";
    for(var k in obj){
        s+=k+":"+obj[k]+"<br/>";
    }
    msgDiv.innerHTML = s;  //累计信息
}

总结：

凌冰_

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML5 拖放图片

(1)将图片拖动到层中(2)图片先拖动到第一个层(3)在第一个层中拖动到第二个层中(4)实现代码拖放 /* div的大小 */ .box{ width:200px; height: 200px; } /* div1
复制链接

扫一扫