H5的拖放應(yīng)該如何完成
發(fā)表時(shí)間：2023-09-22 來(lái)源：明輝站整理相關(guān)軟件相關(guān)文章人氣：
[摘要]這次給大家?guī)?lái)H5的拖放應(yīng)該如何實(shí)現(xiàn)，實(shí)現(xiàn)H5拖放效果應(yīng)該的注意事項(xiàng)有哪些，下面就是實(shí)戰(zhàn)案例，一起來(lái)看一下。簡(jiǎn)介拖放是一種常見(jiàn)的特性，即抓取對(duì)象以后拖到另一個(gè)位置。在 HTML5 中，拖放是標(biāo)準(zhǔn)的一部分，任何元素都能夠拖放。先點(diǎn)擊一個(gè)小例子：在用戶開(kāi)始拖動(dòng) <p> 元素時(shí)執(zhí)行 Java...
這次給大家?guī)?lái)H5的拖放應(yīng)該如何實(shí)現(xiàn)，實(shí)現(xiàn)H5拖放效果應(yīng)該的
注意事項(xiàng)有哪些，下面就是實(shí)戰(zhàn)案例，一起來(lái)看一下。
簡(jiǎn)介
拖放是一種常見(jiàn)的特性，即抓取對(duì)象以后拖到另一個(gè)位置。
在 HTML5 中，拖放是標(biāo)準(zhǔn)的一部分，任何元素都能夠拖放。
先點(diǎn)擊一個(gè)小例子：在用戶開(kāi)始拖動(dòng) <p> 元素時(shí)執(zhí)行 JavaScript
<p draggable="true" ondragstart="myFunction(event)">拖動(dòng)我!</p>
提示： 鏈接和圖片默認(rèn)是可拖動(dòng)的，不需要 draggable 屬性。
定義和用法
在拖放的過(guò)程中會(huì)觸發(fā)以下事件：
在拖動(dòng)目標(biāo)上觸發(fā)事件 (源元素): ondragstart - 用戶開(kāi)始拖動(dòng)元素時(shí)觸發(fā)
ondrag - 元素正在拖動(dòng)時(shí)觸發(fā)
ondragend - 用戶完成元素拖動(dòng)后觸發(fā)
釋放目標(biāo)時(shí)觸發(fā)的事件: ondragenter - 當(dāng)被鼠標(biāo)拖動(dòng)的對(duì)象進(jìn)入其容器范圍內(nèi)時(shí)觸發(fā)此事件
ondragover - 當(dāng)某被拖動(dòng)的對(duì)象在另一對(duì)象容器范圍內(nèi)拖動(dòng)時(shí)觸發(fā)此事件
ondragleave - 當(dāng)被鼠標(biāo)拖動(dòng)的對(duì)象離開(kāi)其容器范圍內(nèi)時(shí)觸發(fā)此事件
ondrop - 在一個(gè)拖動(dòng)過(guò)程中，釋放鼠標(biāo)鍵時(shí)觸發(fā)此事件
瀏覽器支持
Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 支持拖動(dòng)。
注意:Safari 5.1.2不支持拖動(dòng)；在拖動(dòng)元素時(shí)，每隔 350 毫秒會(huì)觸發(fā) ondragover 事件。
實(shí)例
先貼代碼，再逐一解釋：
<!DOCTYPE html>
<html>
<head>
<title>HTML5拖拽</title>
<meta charset="utf-8">
<style>
#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
</style>
</head>
<body>
<p>拖動(dòng)img_w3slogo.gif圖片到矩形框中:</p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="images/img_w3slogo.gif" draggable="true" ondragstart="drag(event)" width="300" height="56">
<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>
</body>
</html>相信看了這些案例你已經(jīng)掌握了方法，更多精彩請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！
相關(guān)閱讀：
HTML的table鼠標(biāo)拖拽排序該如何實(shí)現(xiàn)
html屬于什么文件html的文件該如何打開(kāi)
html、css和js的注釋規(guī)范用法有哪些
以上就是H5的拖放應(yīng)該如何實(shí)現(xiàn)的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！
網(wǎng)站建設(shè)是一個(gè)廣義的術(shù)語(yǔ)，涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護(hù)的網(wǎng)站。
