html中实现对图片的简单拖放

来源：互联网发布：jquery.min.js下载1.9 编辑：程序博客网时间：2024/06/06 02:24

HTML代码

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>    <title>拖放</title>    <style>        .box {            width:400px;            height:400px;        }        #box2 {            float:left;             background-color:#808080        }        #box1 {            float:left;            background-color:#00ffff;        }    </style>    <script src="app.js"></script></head><body>    <div id="box1" class="box"></div>    <div id="box2" class="box"></div>    <img src="raw/1.jpg"style="width:200px;height:200px" id="img1">    <div id="msg"></div></body></html>

javascript代码

var box1Div,img1,box2Div;window.onload = function () {    box1Div = document.getElementById("box1");    box2Div = document.getElementById("box2");    msgDiv = document.getElementById("msg");    img1 = document.getElementById("img1");    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;//}

0 0