HTML5 拖放_1_html drag json-CSDN博客

本文链接：https://blog.csdn.net/AndyJson/article/details/51821684

知识点
1.HTML5拖放
拖放（Drag和drop）是HTML5标准的组成部分。
2.拖动开始
ondragstart：调用一个函数，drag（event），它规定了被拖动的数据
3.设置拖动数据
setData（）：设置被拖数据的数据类型和值
4.放入位置
ondragover：事件规定了何处位置放置被拖动的数据
5.放置
ondrop：当放置被拖数据时，会发生drop事件

将图片拖动到单一区域
Index.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>图片拖放</title>
    <script src="app.js"></script>
    <style>
        .box{
            width: 400px;
            height: 400px;
        }
        #box1{
            background-color: azure;
        }
    </style>
</head>
<body>
<div id="box1" class="box"></div>
<img src="img/2.jpg" id="img1">
<div id="msg"></div>
</body>
</html>

app.js

/**
 * Created by lenovo on 2016/7/4.
 */
var box1div,msgdiv,img1;

window.onload=function(){
    box1div=document.getElementById("box1");
    msgdiv=document.getElementById("msg");
    img1=document.getElementById("img1");
/*
    box1div.ondragenter=function(e){
        showobj(e);
    }*/

    box1div.ondragover=function(e){
        //禁用系统事件
        e.preventDefault();
    }

    img1.ondragstart=function(e){
        e.dataTransfer.setData("imgId","img1");
    }

    box1div.ondrop= function (e){
        /*打印事件信息*/
        showobj(e.dataTransfer);

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

function showobj(obj){
    var s="";
    for(var k in obj){
        s+=k+":"+obj[k]+"<br/>";
    }
    msgdiv.innerHTML=s;
}

将图片拖到到可选区域
Index.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>图片拖放</title>
    <script src="app.js"></script>
    <style>
        .box{
            width: 400px;
            height: 400px;
        }
        #box1{
            background-color: azure;
            float: left;
        }
        #box2{
            background-color: antiquewhite;
            float: left;
        }
    </style>
</head>
<body>
<div id="box1" class="box"></div>
<div id="box2" class="box"></div>
<img src="img/2.jpg" id="img1">
<div id="msg"></div>
</body>
</html>

app.js

/**
 * Created by lenovo on 2016/7/4.
 */
var box1div,msgdiv,img1,box2div;

window.onload=function(){
    box1div=document.getElementById("box1");
    box2div=document.getElementById("box2");
    msgdiv=document.getElementById("msg");
    img1=document.getElementById("img1");
/*
    box1div.ondragenter=function(e){
        showobj(e);
    }*/

    box1div.ondragover=function(e){
        //禁用系统事件
        e.preventDefault();
    }

    box2div.ondragover=function(e){
        //禁用系统事件
        e.preventDefault();
    }

    img1.ondragstart=function(e){
        e.dataTransfer.setData("imgId","img1");
    }

    box1div.ondrop= dropImghandler;
    box2div.ondrop=dropImghandler;
}

function dropImghandler(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 k in obj){
        s+=k+":"+obj[k]+"<br/>";
    }
    msgdiv.innerHTML=s;
}