2016.11.15 HTML5新特性拖放

来源：互联网发布：2017年网络知识竞赛编辑：程序博客网时间：2024/05/13 16:22

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <script>        function allowDrop(ev){            ev.preventDefault();        }        function drag(ev){            ev.dataTransfer.setData("Text",ev.target.id);        }        function drop(ev){            ev.preventDefault();           var data= ev.dataTransfer.getData("Text");            ev.target.appendChild(document.getElementById(data))        }    </script>    <style>        #tuo{            width: 500px;            height: 400px;            background-color: #0088cc;        }        #cun{            width: 500px;            height: 400px;            background-color: wheat;        }    </style></head><body>      <div id="cun" ondrop="drop(event)" ondragover="allowDrop(event)"></div>        <hr>      <img src="page_photo.jpg" alt="" id="tuo" draggable="true" ondragstart="drag(event)" width="500" height="400"/></body></html>

0 0

2016.11.15 HTML5新特性 拖放

2016.11.15 HTML5新特性拖放