HTML 参考手册

HTML 标签大全

HTML draggable属性

全局属性 draggable 是一个枚举类型的属性，用于标识元素是否允许使用拖放操作API 拖动。

draggable 的取值如下：
　　　 true, was bedeutet, dass das Element verschoben werden kann
　　　 false, was bedeutet, dass das Element nicht verschoben werden kann
Wenn diese Eigenschaft nicht festgelegt ist, beträgt der Standardwert auto, was bedeutet, dass das Standardverhalten des Browsers verwendet wird.
Diese Eigenschaft ist eines der Typen, nicht des Boolean-Typs. Dies bedeutet, dass der Wert explizit auf true oder false festgelegt werden muss, wie <label draggable>Beispiel Label</label> Diese Abkürzung ist nicht erlaubt. Die richtige Verwendung ist <label draggable="true">Beispiel Label</label>.
Standardmäßig können nur ausgewählter Text, Bilder und Links verschoben werden. Für andere Elemente muss die ondragstart-Ereignisreihenfolge eingerichtet werden, um ordnungsgemäß zu funktionieren

Globale Attribute von HTML

Online Beispiel

Beispiel zeigt einen beweglichen Absatz:

Beispiel

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">　
<title>Grund教程(oldtoolbag.com)</title>
<style type="text/css">
#div1　{width:400px; height:80px; padding:10px; border:1px solid red;}
</style>
<script type="text/javascript">
function allowDrop(ev)
{
　　　　ev.preventDefault();
}
function drag(ev)
{
　　　　ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev)
{
　　　　var data=ev.dataTransfer.getData("Text");
　　　　ev.target.appendChild(document.getElementById(data));
　　　　ev.preventDefault();
}
</script>
</head>
<body>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br　/>
<p id="drag1"draggable="true" ondragstart="drag(event)">Dies ist ein beweglicher Absatz. Ziehen Sie diesen Absatz in das obere rote Rechteck./p>
</body>
</html>

Test to see ‹/›

Browser Compatibility

IEFirefoxOperaChromeSafari

Internet Explorer 9+, Firefox, Opera, Chrome and Safari browsers support the draggable attribute.

Note: Internet Explorer 8 and earlier IE versions do not support the draggable attribute.

Definition and Usage

The draggable attribute specifies whether an element is draggable.
Tip:Links and images are draggable by default.
Tip: The draggable attribute is usually used in drag-and-drop operations.

HTML 4.01 between HTML5difference

The draggable attribute is an HTML5 Newly added.

Syntax

　　　　 <element draggable="true|false|auto">

Attribute Value

Value	Description
true	Specifies that the element is draggable.
false	Specifies that the element is not draggable.
auto	Use the browser's default features.

Globale Attribute von HTML

HTML: <template> Tag