HTML5 学习笔记11-拖放

最新推荐文章于 2022-07-21 16:33:45 发布

RonnyZhao

最新推荐文章于 2022-07-21 16:33:45 发布

阅读量234

点赞数

分类专栏：学习笔记文章标签： html 新手 drag

本文链接：https://blog.csdn.net/qq_19919127/article/details/54380777

版权

学习笔记专栏收录该内容

15 篇文章 0 订阅

订阅专栏

1、ondragstart 拖放开始；setData 设置拖动类型；ondragover 在何处放置；ondrop 放置被拖动数据时发生

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>拖动</title>
    <style>
        .box{
            width: 400px;
            height: 400px;            
        }
        #box1{
            float: left;
            background-color: lightgray;
        }
        #box2{
            float: left;
            background-color: aquamarine;
        }
    </style>
    <!--<script src="js/app.js"></script>-->
</head>
<body>
    <div id="box1" class="box"></div>
    <div id="box2" class="box"></div>
    <img id="img1" src="image/drag.png" alt="拖动">
    <div id="msg1"></div>
    <script>
        /**
         * Created by admin on 2017/1/12.
         */
        var box1Div,box2Div,msg1Div,img1;
        window.οnlοad=function(){
            box1Div=document.getElementById("box1");
            box2Div=document.getElementById("box2");
            msg1Div=document.getElementById("msg1");
            img1=document.getElementById("img1");
            /*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=dragHandler;
            box2Div.οndrοp=dragHandler;
        }

        function dragHandler(e){
            showObj(e.dataTransfer);
            e.preventDefault();

            var img=document.getElementById(e.dataTransfer.getData("imgId"));
            e.target.appendChild(img);
        }

        function showObj(obj){
            var s="";
            for(var x in obj){
                s+=x+":"+obj[x]+"<br>";
            }
            msg1Div.innerHTML=s;
        }
    </script>
</body>
</html>

2、拖放本地资源

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>拖放本地资源</title>
    <style>
        #imgBox{
            width: 500px;
            height: 500px;
            background-color: lightgray;
        }
    </style>
</head>
<body>
    <div id="imgBox"></div>
    <div id="msg"></div>
    <script>
        var imgBox,msgDiv;
        window.οnlοad=function(){
            imgBox=document.getElementById("imgBox");
            msgDiv=document.getElementById("msg");

            imgBox.οndragοver=function(e){
                e.preventDefault();
            }
            imgBox.οndrοp=function(e){
                e.preventDefault();

                var f=e.dataTransfer.files[0];
                var filereader=new FileReader();
                filereader.οnlοad=function(e){
                    imgBox.innerHTML="<img src=\""+filereader.result+"\">"
                    //showObj(e.target);
                }
                filereader.readAsDataURL(f);
            }
        }
        function showObj(obj){
            var s="";
            for(var x in obj){
                s+=x+":"+obj[x]+"<br>";
            }
            msgDiv.innerHTML=s;
        }
    </script>
</body>
</html>

RonnyZhao

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5 学习笔记11-拖放

1、ondragstart 拖放开始；setData 设置拖动类型；ondragover 在何处放置；ondrop 放置被拖动数据时发生拖动 .box{ width: 400px; height: 400px; } #box1{
复制链接

扫一扫