实例
一个可拖动的段落：
<p draggable="true">这是一个可拖动的段落。</p>
浏览器支持
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 中的新属性。
语法
<element draggable="true|false|auto">
属性值
值 描述
true 规定元素的可拖动的。
false 规定元素不可拖动。
auto 使用浏览器的默认行为。
实例：
<!doctype html>
<html class="no-js">
<head>
<meta charset="utf-8">
<title>html5-draggable(拖放)</title>
<style type="text/css">
#div1, #div2 {float:left; width:100px; height:35px; margin:10px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script src="js/modernizr.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
/*
* 虽然已经设定了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)); //将被拖动元素添加到接收元素尾部
}
</script>
</head>
<body>
<div id="div1" ondrop="drop(event)" ondragover="allowdrop(event)">
<!--为了使元素可拖动，把 draggable 属性设置为 true-->
<img src="http://www.w3school.com.cn/i/w3school_logo_black.gif" draggable="true" ondragstart="drag(event)" id="drag1" />
</div>
<div id="div2" ondrop="drop(event)" ondragover="allowdrop(event)"></div>
</body>
</html>
以上就是html5规定元素是否可拖动的属性draggable的详细内容。