明輝手游網(wǎng)中心：是一個免費提供流行視頻軟件教程、在線學習分享的學習平臺！

H5的拖放應該如何完成

發(fā)表時間：2024-05-08 來源：明輝站整理相關軟件相關文章人氣：

[摘要]這次給大家?guī)鞨5的拖放應該如何實現(xiàn)，實現(xiàn)H5拖放效果應該的注意事項有哪些，下面就是實戰(zhàn)案例，一起來看一下。簡介拖放是一種常見的特性，即抓取對象以后拖到另一個位置。在 HTML5 中，拖放是標準的一部分，任何元素都能夠拖放。先點擊一個小例子：在用戶開始拖動 <p> 元素時執(zhí)行 Java...
這次給大家?guī)鞨5的拖放應該如何實現(xiàn)，實現(xiàn)H5拖放效果應該的注意事項有哪些，下面就是實戰(zhàn)案例，一起來看一下。

簡介

拖放是一種常見的特性，即抓取對象以后拖到另一個位置。

在 HTML5 中，拖放是標準的一部分，任何元素都能夠拖放。

先點擊一個小例子：在用戶開始拖動 <p> 元素時執(zhí)行 JavaScript

<p draggable="true" ondragstart="myFunction(event)">拖動我!</p>


提示： 鏈接和圖片默認是可拖動的，不需要 draggable 屬性。

定義和用法

在拖放的過程中會觸發(fā)以下事件：

在拖動目標上觸發(fā)事件 (源元素): ondragstart - 用戶開始拖動元素時觸發(fā)

ondrag - 元素正在拖動時觸發(fā)

ondragend - 用戶完成元素拖動后觸發(fā)

釋放目標時觸發(fā)的事件: ondragenter - 當被鼠標拖動的對象進入其容器范圍內(nèi)時觸發(fā)此事件

ondragover - 當某被拖動的對象在另一對象容器范圍內(nèi)拖動時觸發(fā)此事件

ondragleave - 當被鼠標拖動的對象離開其容器范圍內(nèi)時觸發(fā)此事件

ondrop - 在一個拖動過程中，釋放鼠標鍵時觸發(fā)此事件

瀏覽器支持

Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 支持拖動。

注意:Safari 5.1.2不支持拖動；在拖動元素時，每隔 350 毫秒會觸發(fā) ondragover 事件。

實例

先貼代碼，再逐一解釋：

<!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>拖動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)掌握了方法，更多精彩請關注php中文網(wǎng)其它相關文章！

相關閱讀：

HTML的table鼠標拖拽排序該如何實現(xiàn)

html屬于什么文件html的文件該如何打開

html、css和js的注釋規(guī)范用法有哪些

以上就是H5的拖放應該如何實現(xiàn)的詳細內(nèi)容，更多請關注php中文網(wǎng)其它相關文章！


網(wǎng)站建設是一個廣義的術語，涵蓋了許多不同的技能和學科中所使用的生產(chǎn)和維護的網(wǎng)站。