小編給大家分享一下html5規定元素是否可拖動的屬性draggable怎么用，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
實例
一個可拖動的段落：
<p draggable="true">這是一個可拖動的段落。</p>
瀏覽器支持
IE
Firefox
Chrome
Safari
Opera
Internet Explorer 9+, Firefox, Opera, Chrome, and Safari 支持 draggable 屬性。
注釋：Internet Explorer 8 以及更早的版本，不支持 draggable 屬性。
定義和用法
draggable 屬性規定元素是否可拖動。
提示：鏈接和圖像默認是可拖動的。
提示：draggable 屬性常用在拖放操作中。請在我們的拖放教程中學習更多內容。
HTML 4.01 與 HTML5 之間的差異
draggable 屬性是 HTML5 中的新屬性。
語法
<element draggable="true|false|auto">
屬性值
| 值 | 描述 |
| true | 規定元素的可拖動的。 |
| false | 規定元素不可拖動。 |
| auto | 使用瀏覽器的默認行為。 |
實例：
<!DOCTYPE html>
<html class="no-js">
<head>
<meta charset="utf-8">
<title>HTML5-draggable(拖放)</title>
<style type="text/css">
#div1, #div2 {float:left; width:100px; height:35px; margin:10px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script src="js/modernizr.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
/*
* 雖然已經設定了img元素可被拖動，但是瀏覽器默認地，無法將數據/元素放置到其他元素中。
* 如果有需要設置某些元素可接受被拖動元素，則要阻止它的默認行為，
* 這要通過設置該接收元素的ondragover 事件，調用event.preventDefault() 方法
*/
function allowDrop(ev) {
ev.preventDefault(); //阻止默認行為
//ev.target.id
//此處ev.target是接收元素，通過事件被綁定在哪個元素即可區分
}
/*
* 當該img元素被拖動時，會觸發一個ondragstart 事件，該事件調用了一個方法drag(event)。
*/
function drag(ev) {
//ev.dataTransfer.setData() 方法設置被拖數據的數據類型（Text）和值（被拖元素id），
//該方法將被拖動元素的id存儲到事件的dataTransfer對象內，ev.dataTransfer.getData()可將該元素取出。
//此處ev.target是被拖動元素
ev.dataTransfer.setData("Text", ev.target.id);
}
/*
* 當被拖元素移動到接收元素，
* 松開鼠標時（即被拖元素放置在接收元素內時）會出發ondrop事件
*/
function drop(ev) {
ev.preventDefault(); //阻止默認行為
var data = ev.dataTransfer.getData("Text"); //將被拖動元素id取出
ev.target.appendChild(document.getElementById(data)); //將被拖動元素添加到接收元素尾部
}
</script>
</head>
<body>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
<!--為了使元素可拖動，把 draggable 屬性設置為 true-->
<img src="http://www.w3school.com.cn/i/w3school_logo_black.gif" draggable="true" ondragstart="drag(event)" id="drag1" />
</div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</body>
</html>
以上是“html5規定元素是否可拖動的屬性draggable怎么用”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
