html5元素拖动 （转载黑桐）
生活随笔
收集整理的這篇文章主要介紹了
html5元素拖动 （转载黑桐）
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
?
HTML5 元素拖動
1、拖動元素img的相關(guān)設(shè)置：
設(shè)置元素可以拖動屬性
draggable="true"設(shè)置元素被拖動時觸發(fā)的事件
οndragstart="drag(event)"圖片元素可拖動的完整代碼
HTML：
<img id="drag1" src="images/ycbt1.JPG" draggable="true" οndragstart="drag(event)" />Javascript：
<script> function drag(event){event.dataTransfer.setDate("Text",ev.target.id); } </script>2、設(shè)置允許拖動對象放置的元素div：
允許拖動圖片放置在div內(nèi)，阻止對事件的默認處理方式，在div內(nèi)添加屬性
οndragοver="allowDrop(event)"放置時觸發(fā)的事件
οndrοp="drop(event)"div元素可放置拖動img的完整代碼
HTML：
<div id="div1" οndrοp="drop(event)" οndragοver="allowDrop(event)" style="width:600px; height:100px; border:1px solid black"></div>Javascript:
<script> function drag(ev) {ev.dataTransfer.setData("Text",ev.target.id); }function allowDrop(ev) {ev.preventDefault(); }function drop(ev){ev.preventDefault();var data = ev.dataTransfer.getData("Text");ev.target.appendChild(document.getElementById(data)); } </script>3、把兩張圖片img拖動到一個div中，并排放置完整代碼
HTML：
<body><div id="div1" οndrοp="drop(event)" οndragοver="allowDrop(event)"></div><img class="img" id="drag1" src="images/ycbt1.JPG" draggable="true" οndragstart="drag(event)"/><img class="img" id="drag2" src="images/ycbt2.JPG" draggable="true" οndragstart="drag(event)"/> </body>CSS：
<style type="text/css"> #div1 {width:600px; height:100px; border:1px solid black; padding:10px} .img {width:60px; height:90px; margin:10px; float:left} </style>Javascript:
<script type="text/javascript"> function drag(ev) {ev.dataTransfer.setData("Text",ev.target.id); }function allowDrop(ev) {ev.preventDefault(); }function drop(ev){ev.preventDefault();var data = ev.dataTransfer.getData("Text");ev.target.appendChild(document.getElementById(data)); } </script>轉(zhuǎn)載于:https://www.cnblogs.com/135wxp/p/5770193.html
總結(jié)
以上是生活随笔為你收集整理的html5元素拖动 （转载黑桐）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： .lastevent、!analyze（
- 下一篇： 在这里的周末休息也就是看看奥运