HTML5 拖放、交换位置
生活随笔
收集整理的這篇文章主要介紹了
HTML5 拖放、交换位置
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
設(shè)置元素為可拖放
draggable 屬性設(shè)置為 true: <img draggable="true" />拖動(dòng)什么 - ondragstart 和 setData()
dataTransfer.setData() 方法設(shè)置被拖數(shù)據(jù)的數(shù)據(jù)類(lèi)型和值: function drag(e) { e.dataTransfer.setData("text/html", value); }注："text/html"參數(shù)，我在Mac上用Safari打開(kāi)，遇到過(guò)不能正常解析，解決方法把html和text位置互換一下。
放到何處 - ondragover
ondragover 事件規(guī)定在何處放置被拖動(dòng)的數(shù)據(jù)。 默認(rèn)地，無(wú)法將數(shù)據(jù)/元素放置到其他元素中。如果需要設(shè)置允許放置，我們必須阻止對(duì)元素的默認(rèn)處理方式。 event.preventDefault();進(jìn)行放置 - ondrop
調(diào)用 preventDefault() 來(lái)避免瀏覽器對(duì)數(shù)據(jù)的默認(rèn)處理（drop 事件的默認(rèn)行為是以鏈接形式打開(kāi)） 通過(guò) dataTransfer.getData("text/html") 方法獲得被拖的數(shù)據(jù)。該方法將返回在 setData() 方法中設(shè)置為相同類(lèi)型的任何數(shù)據(jù)。 function drop(e) { e.preventDefault(); }瀏覽器支持
Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。 注釋：在 Safari 5.1.2 中不支持拖放。示例：
Example1:
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><title>Document</title><style type="text/css">html,body {margin: 0;padding: 0;}.drag {width: 50px;height: 50px;background: blue;display: inline-block;margin: 10px;color: white;font-size: 20px;text-align: center;line-height: 50px;cursor: move;}</style> </head><body><div class="drag drag1" draggable="true" ondragstart="drag(event, this)" ondragover="allowDrop(event)" ondrop="drop(event,this)">1</div><div class="drag drag2" draggable="true" ondragstart="drag(event, this)" ondragover="allowDrop(event)" ondrop="drop(event,this)">2</div><div class="drag drag3" draggable="true" ondragstart="drag(event, this)" ondragover="allowDrop(event)" ondrop="drop(event,this)">3</div><script type="text/javascript">var srcEl = null;function drag(e, el) {srcEl = el;e.dataTransfer.setData("text/html", el.innerHTML);}function drop(e, el){e.preventDefault();// e.stopPropagation();if (srcEl != el) {srcEl.innerHTML = el.innerHTML;el.innerHTML = e.dataTransfer.getData("text/html");}}function allowDrop(e) {e.preventDefault();}</script> </body></html>Example2:
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><title>Document</title><style type="text/css">html,body {margin: 0;padding: 0;}#div1 {width: 300px;height: 300px;border: 1px solid red;}#drag1 {width: 300px;height: 300px;}</style> </head><body><div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div><img id="drag1" draggable="true" ondragstart="drag(event)"src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=175152409,3501278703&fm=27&gp=0.jpg" /><script type="text/javascript">function drag(e) {e.dataTransfer.setData("text/html", e.target.id);}function drop(e) {e.preventDefault();e.stopPropagation();var id = e.dataTransfer.getData('text/html');e.target.appendChild(document.getElementById(id));}function allowDrop(e) {e.preventDefault();}</script> </body></html>?W3school原文鏈接：http://www.w3school.com.cn/html5/html_5_draganddrop.asp
本文轉(zhuǎn)載于:猿2048?https://www.mk2048.com/blog/blog.php?id=ji2aahj&title=HTML5 拖放、交換位置
總結(jié)
以上是生活随笔為你收集整理的HTML5 拖放、交换位置的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： Vue2.0 --- vue-cli脚手
- 下一篇： 3. HTML中的容器标签