HTML draggable 事件屬性

本文轉載自查看原文 2020-07-07 21:41 498

[

  HTML 事件屬性

HTML draggable 事件屬性的定義和用法

draggable 屬性規定元素是否可拖動。

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Break易站(breakyizhan.com)</title> <style type="text/css"> #div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;} </style> <script type="text/javascript"> function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData("Text",ev.target.id); } function drop(ev) { var data=ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data)); ev.preventDefault(); } </script> </head> <body> <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <br /> <p id="drag1" draggable="true" ondragstart="drag(event)">這是一段可移動的段落。請把該段落拖入上面的矩形。</p> </body> </html>

     提示：可以修改代碼后運行

提示： 鏈接和圖像默認是可拖動的。

提示： draggable 屬性經常用於拖放操作。

HTML draggable 事件屬性：HTML 4.01 與 HTML5之間的差異

draggable 屬性是 HTML5 新增的。

HTML draggable 事件屬性：語法

<element draggable="true|false|auto">

HTML draggable 事件屬性：屬性值

值描述

true 規定元素是可拖動的。

false 規定元素是不可拖動的。

auto 使用瀏覽器的默認特性。

  HTML 事件屬性

]

  本文標題： HTML draggable 事件屬性 - Break易站

轉載請保留頁面地址：https://www.breakyizhan.com/html/9983.html

值	描述
true	規定元素是可拖動的。
false	規定元素是不可拖動的。
auto	使用瀏覽器的默認特性。

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 HTML之拖放操作draggable HTML oninvalid 事件屬性 Html5-draggable元素拖動 HTML5 video 詳解屬性事件方法 draggable屬性設置元素是否可拖動。 HTML readyState 屬性 iframe onreadystatechange事件 HTML onmousedown 事件屬性關於鼠標按鍵的問題； HTML元素（包括HTML5）的標簽、屬性及事件大全拖拽的效果第一步設置可拖拽的屬性 draggable="true" 綁定drag 事件第二步設置放置位置觸發的事件 dragover 第三步設置放置之后觸發的事件 dragover 下面請看代碼： HTML5 Audio/Video 標簽,屬性,方法,事件匯總