HTML - 可拖動屬性

HTML 的 **draggable** 屬性是一個全域性屬性，用於指定元素是否可以使用滑鼠拖動。

如果未設定此屬性，則其值為 auto，這意味著拖動行為是預設的瀏覽器行為。只有連結和圖片預設情況下是可拖動的。對於其他元素，我們必須使用 draggable 屬性，並且 draggable 屬性通常用於拖放操作。

語法

<element draggable = "true | false" >

值可以是 true 或 false

true: 元素可以被拖動。
false: 元素不能被拖動。

應用於

draggable 屬性可以應用於任何 HTML 元素以使其可拖動。但是，某些元素通常不支援或不適合拖動。例如，表單元素（如 <input>、<button>），表格元素（如 <th>、<td>），結構元素（如 <head>、<title>）等不支援 draggable 屬性。

HTML draggable 屬性示例

以下示例將說明 HTML draggable 屬性，以及我們應該在哪裡以及如何使用此屬性！

使段落可拖動

在下面的示例中，我們在 HTML 中建立一個段落元素並使其可拖動。

<!DOCTYPE html>
<html>

<head>
<style>
   .drag {
      border: 2px solid #000;
      border-radius: 8px;
      padding: 10px; 
      background-color: #f9f9f9; 
      color: #333; 
      font-family: Arial, sans-serif; 
      font-size: 16px; 
      cursor: grab; 
   }

   .drag:active {
      background-color: #e0e0e0; 
      transform: scale(1.05); 
      cursor: grabbing; 
   }
</style>
</head>

<body>
   <p class="drag" draggable="true">
      This is a draggable paragraph.
      You can drag this to any where you wanted.
   </p>
</body>

</html>

拖放段落元素

考慮另一個示例，這裡我們建立了一個可拖動的段落元素，可以使用事件偵聽器和函式來處理拖放操作，將其拖放到指定的矩形 div 容器中。

<!DOCTYPE html>
<html>

<head>
<style>
   #div {
      width: 90%;
      height: 100px;
      padding: 12px;
      border: 2px solid gray;
   }
   .drag {
   border: 2px solid #000;
   border-radius: 8px;
   padding: 10px; 
   background-color: #f9f9f9; 
   color: #333; 
   font-family: Arial, sans-serif; 
   font-size: 16px; 
   cursor: grab; 
   }

   .drag:active {
      background-color: #e0e0e0; 
      transform: scale(1.05); 
      cursor: grabbing; 
   }
</style>
</head>

<body>
   <div id="div" 
      ondrop="drop(event)" 
      ondragover="allowDrop(event)">
   </div>
   <br>
   <p id="drag" 
      class="drag" 
      draggable="true" 
      ondragstart="drag(event)">
         This is a draggable paragraph. 
         Drag this element into the rectangle box.
   </p>
   <script>
      function allowDrop(ev) {
         ev.preventDefault();
      }

      function drag(ev) {
         ev.dataTransfer.setData("Text", ev.target.id);
      }

      function drop(ev) {
         let data = ev.dataTransfer.getData("Text");
         ev.target.appendChild(document.getElementById(data));
         ev.preventDefault();
      }
   </script>
</body>

</html>

支援的瀏覽器

屬性
draggable	4.0	9.0	3.5	6.0	12.0

html_attributes_reference.htm

列印頁面