html div draggable,HTML draggable属性用法及代码示例

此属性用于指定元素是否可拖动。链接和图像默认是可拖动的。 draggable属性通常在拖放操作中使用。

用法:

属性值：该属性包含以下列出的三个值：

true:此值表示元素是可拖动的。

false:此值表示该元素不可拖动。

auto:此值代表默认浏览器的使用。

例：

draggable attribute

.dropbox {

width:350px;

height:70px;

padding:10px;

border:1px solid #aaaaaa;

}

h1 {

color:green;

}

function droppoint(event) {

var data = event.dataTransfer.getData("Text");

event.target.appendChild(document.getElementById(data));

event.preventDefault();

}

function allowDropOption(event) {

event.preventDefault();

}

function dragpoint(event) {

event.dataTransfer.setData("Text", event.target.id);

}

GeeksforGeeks

draggable attribute

οndragοver="allowDropOption(event)">

GeeksforGeeks:A computer science portal for geeks

输出：

拖动之前：

拖放后

支持的浏览器：draggable属性支持的浏览器如下：

谷歌浏览器4.0

Internet Explorer 9.0

Firefox 3.5

Opera 12.0

Safari 6.0