draggable定義和用法：
1、draggable 屬性規(guī)定元素是否可拖動。
2、提示：?鏈接和圖像默認是可拖動的。
3、提示：?draggable 屬性經(jīng)常用于拖放操作。
注意：draggable 屬性是 HTML5 新增的。
設(shè)置屬性值
值 描述 true 規(guī)定元素是可拖動的。 false 規(guī)定元素是不可拖動的。 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(); } //結(jié)束拖拽 function dragEnd(e){ ?? ?e.preventDefault(); }
拓展一下其他方法：
? ? ? ? 其實還有一種方法，如果是jquery項目，可以用jquery-ui.js的腳本，這樣就可以不用在標簽上面設(shè)置draggable='true'和綁定一堆事件了。文章來源：http://www.zghlxwxcb.cn/news/detail-592901.html
//使用標簽綁定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就只能在容器的范圍內(nèi)活動了
cursor: "move", //拖動時鼠標指針的狀態(tài) ，
cursorAt:{top:10}, //拖動的時候鼠標指針的位置,相對被拖動對象的邊框，單位px
opacity: 0.40, //設(shè)置對象被拖動時的透明度
handle: "div", //設(shè)置拖動控制器，當(dāng)鼠標按住控制器的時候，才能拖動對象
scroll:false, //設(shè)置當(dāng)拖動超出整個瀏覽器窗口,是否滾動瀏覽器
distance: 20, //設(shè)置當(dāng)鼠標拖動多少像素時對象才會移動
//delay: 1000, //設(shè)置延遲時間 單位毫秒
grid:[50,50], //設(shè)置每次拖動的步進 單位px
dragPrevention:['input'], //設(shè)置被拖動的div碰到那些dom元素時停止
start:function(e){}, //開始拖動執(zhí)行的函數(shù)
drag:function(e){}, //拖動時執(zhí)行的函數(shù)
stop:function(e){} //拖動停止執(zhí)行的函數(shù)
});
//默認方式：什么都不定義也可以拖動
$('#jquery_drag').draggable();
</script>
Tips:文中如有疑問或者錯處，可以私信“且慢碼農(nóng)”。文章來源地址http://www.zghlxwxcb.cn/news/detail-592901.html
到了這里，關(guān)于HTML5新增的拖拽屬性draggable，怎么實現(xiàn)拖拽？的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
