实例
一个可拖动的段落:
这是一个可拖动的段落。
浏览器支持
IE
Firefox
Chrome
Safari
Opera
Internet Explorer 9 , Firefox, Opera, Chrome, and Safari 支持 draggable 属性。
注释:Internet Explorer 8 以及更早的版本,不支持 draggable 属性。
定义和用法
draggable 属性规定元素是否可拖动。
提示:链接和图像默认是可拖动的。
提示:draggable 属性常用在拖放操作中。请在我们的拖放教程中学习更多内容。
HTML 4.01 与 HTML5 之间的差异
draggable 属性是 HTML5 中的新属性。
语法
属性值值描述
true规定元素的可拖动的。
false规定元素不可拖动。
auto使用浏览器的默认行为。
实例:
HTML5-draggable(拖放)#div1, #div2 {float:left; width:100px; height:35px; margin:10px;padding:10px;border:1px solid #aaaaaa;}
/*
* 虽然已经设定了img元素可被拖动,但是浏览器默认地,无法将数据/元素放置到其他元素中。
* 如果有需要设置某些元素可接受被拖动元素,则要阻止它的默认行为,
* 这要通过设置该接收元素的ondragover 事件,调用event.preventDefault() 方法
*/
function allowDrop(ev) {
ev.preventDefault(); //阻止默认行为
//ev.target.id
//此处ev.target是接收元素,通过事件被绑定在哪个元素即可区分
}
/*
* 当该img元素被拖动时,会触发一个ondragstart 事件,该事件调用了一个方法drag(event)。
*/
function drag(ev) {
//ev.dataTransfer.setData() 方法设置被拖数据的数据类型(Text)和值(被拖元素id),
//该方法将被拖动元素的id存储到事件的dataTransfer对象内,ev.dataTransfer.getData()可将该元素取出。
//此处ev.target是被拖动元素
ev.dataTransfer.setData("Text", ev.target.id);
}
/*
* 当被拖元素移动到接收元素,
* 松开鼠标时(即被拖元素放置在接收元素内时)会出发ondrop事件
*/
function drop(ev) {
ev.preventDefault(); //阻止默认行为
var data = ev.dataTransfer.getData("Text"); //将被拖动元素id取出
ev.target.appendChild(document.getElementById(data)); //将被拖动元素添加到接收元素尾部
}