draggable定义和用法：
1、draggable 属性规定元素是否可拖动。
2、提示： 链接和图像默认是可拖动的。
3、提示： draggable 属性经常用于拖放操作。
注意：draggable 属性是 HTML5 新增的。
设置属性值
值 描述 true 规定元素是可拖动的。 false 规定元素是不可拖动的。 auto 使用浏览器的默认特性。
使用语法：<element draggable="true|false|auto">
代码演示：
//拖拽功能示例 html： <div id="div1"> <p id="drag1" draggable="true" ondragstart="dragStart(event)" ondrop="drop(event)" ondragend="dragEnd(event)">拖拽标签</p> </div> js: //p标签定义拖拽开始 function dragStart(e){ //拖拽前操作 } //拖拽移动 function drop(e){ e.preventDefault(); } //结束拖拽 function dragEnd(e){ e.preventDefault(); }
拓展一下其他方法：
其实还有一种方法，如果是jquery项目，可以用jquery-ui.js的脚本，这样就可以不用在标签上面设置draggable='true'和绑定一堆事件了。
//使用标签绑定draggable的html：
<html>
<div id="div1">
<p id="drag1" draggable="true" ondragstart="dragStart(event)"
ondrop="drop(event)" ondragend="dragEnd(event)">拖拽标签</p>
</div>
</html>
//使用jquery-ui.js后的html标签示例
<html>
<div id="jquery_div">
<p id="jquery_drag">拖拽标签</p>
</div>
</html>
<script src="/jquery-ui.js"></script>
<script>
//按需使用
$('#jquery_drag').draggable({
//helper: "clone", //拖动时克隆,默认是 original
//axis:"x", //拖动方向
containment:"#jquery_div", //一个容器,div就只能在容器的范围内活动了
cursor: "move", //拖动时鼠标指针的状态 ，
cursorAt:{top:10}, //拖动的时候鼠标指针的位置,相对被拖动对象的边框，单位px
opacity: 0.40, //设置对象被拖动时的透明度
handle: "div", //设置拖动控制器，当鼠标按住控制器的时候，才能拖动对象
scroll:false, //设置当拖动超出整个浏览器窗口,是否滚动浏览器
distance: 20, //设置当鼠标拖动多少像素时对象才会移动
//delay: 1000, //设置延迟时间 单位毫秒
grid:[50,50], //设置每次拖动的步进 单位px
dragPrevention:['input'], //设置被拖动的div碰到那些dom元素时停止
start:function(e){}, //开始拖动执行的函数
drag:function(e){}, //拖动时执行的函数
stop:function(e){} //拖动停止执行的函数
});
//默认方式：什么都不定义也可以拖动
$('#jquery_drag').draggable();
</script>
Tips:文中如有疑问或者错处，可以私信“且慢码农”。
