HTML5之Drag(图片的来回拖动)

<!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 type="text/css">
       #div1,#div2, #div3
       {
           width: 488px;
           height: 70px;
           padding: 10px;
           border: 1px solid #aaaaaa;
       }
   </style>
   <script type="text/javascript">
       function allowDrop(ev) { //阻止默认的链接形式拖动
           ev.preventDefault();
       }
       function drag(ev) {  //设置要拖到哪儿
           ev.dataTransfer.setData("T", ev.target.id);
       }
       function drop(ev) {  //获取地址 并将要拖动的元素放入到目标地址
           ev.preventDefault();
           var data = ev.dataTransfer.getData("T");
           ev.target.appendChild(document.getElementById(data));
       }
   </script>
</head>
<body>
   <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div><br /><div id="div3" ondrop="drop(event)" ondragover="allowDrop(event)"></div><Hr />
   <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"><img id="drag1" src="mxlzl3.jpg" style="background-color:grey" draggable="auto" //这里随便设置都行
       ondragstart="drag(event)" width="488" height="70" /></div></center>
   <img id="Img1" src="mxlzl3.jpg" style="background-color:grey" draggable="auto"
       ondragstart="drag(event)" width="488" height="70" />
</body>
</html>

本文出自 “skingron” 博客,转载请与作者联系!

你可能感兴趣的:(html5,function,图片,border,aaaaaa)