HTML - draggable 属性_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>

支持的浏览器

浏览器
是否支持	4.0	9.0	3.5	6.0	12.0

<< HTML - dir 属性 HTML - hidden 属性 >>