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

打印页面