温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

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

发布时间:2020-04-10 18:18:52 来源:网络 阅读:498 作者:skingron 栏目:移动开发

<!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" draggable="auto" //这里随便设置都行
       ondragstart="drag(event)" width="488" height="70" /></div></center>
   <img id="Img1" src="mxlzl3.jpg" draggable="auto"
       ondragstart="drag(event)" width="488" height="70" />
</body>
</html>

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI