draggable
HTML draggable Attribute （HTML可拖动属性）
The HTML draggable attribute is an enumerated attribute and specifies whether the element is draggable or not (either with native browser behavior or the HTML Drag and Drop API). This attribute is commonly used in the drag and drop operations. （HTML draggable属性是一个枚举属性，指定元素是否可以拖动（使用本机浏览器行为或HTML拖放API ）。此属性通常用于拖放操作。）
Images and links are draggable by default. For other elements, you must set the ondragstart event. （默认情况下，图像和链接可拖动。对于其他元素，必须设置ondragstart事件。）
You can use this attribute on any HTML element. It is a part of the Global Attributes. （您可以在任何HTML元素上使用此属性。它是全局属性的一部分。）
The draggable attribute can have the following values: （Draggable属性可以具有以下值：）
true: the element can be draggable. （- true ：元素可以拖动。）
false: the element cannot be draggable. （- false ：元素不能拖动。）
auto: drag is the default browser behavior. （- auto ：拖动是默认的浏览器行为。）
Syntax
Syntax （语法）
<tag draggable="true|false|auto"></tag>
Example of the HTML draggable attribute:
<!DOCTYPE HTML>
<html>
<head>
<title>Title of the document</title>
<style>
#rectId {
width: 350px;
height: 70px;
padding: 10px;
border: 1px solid #aaaaaa;
}
</style>
<script>
function allowDrop(event) {
event.preventDefault();
}
function drag(event) {
event.dataTransfer.setData("Text", event.target.id);
}
function drop(event) {
var data = event.dataTransfer.getData("Text");
event.target.appendChild(document.getElementById(data));
event.preventDefault();
}
</script>
</head>
<body>
<div id="rectId" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<p id="dragId" draggable="true" ondragstart="drag(event)">
This is a draggable paragraph. Drag this item to the rectangle.
（这是一个可拖动的段落。将此项目拖到矩形上。）
</p>
</body>
</html>