本篇文章就是介紹Draggable(拖動)即實現頁面元素的拖動效果的，所以，一步一步的來。

一、加載方式（首先是加載方式）

1.css樣式加載：

 div id= box >
使用css樣式加載Draggable，方便快捷，但是不利于管理，所以我們有課第二種加載方式，使用Jquery方式加載，一般我們都會使用Jquery的方式進行加載。
2.Jquery方式加載：
//不加屬性$( #box ).draggable();//JS部分$( #box ).draggable({ revert : true, //拖動后是否回到起始位置，boolean類型 cursor : text , //鼠標拖拽樣式，十字，文本等 handle : #pox , //句柄，設置后只在設置后只能在當前元素下實現拖拽 disabled : false, //設置是否可以被拖拽 edge : 50, //設置邊界往內多大距離可以實現拖拽 axis : v , //設置拖拽方向，v：垂直拖拽，h：水平拖拽 proxy: clone , //設置代理元素，使用clone時為復制當前元素 deltaX : 10, //被拖拽元素左上角距離當前光標的X軸方向的距離 deltaY : 10, //被拖拽元素左上角距離當前光標的Y軸方向的距離  proxy: function(source){ //自定義代理元素 var p = $( div >
二、事件（第二是事件）
1.onBeforeDrag 拖動前發生
$( #box ).draggable({ onBeforeDrag : function (e) { alert( 拖動之前觸發！  //return false;});
在拖動前發生，既當鼠標點擊元素時發生，當返回false時將無法拖拽，我們不會讓它直接返回false，因為這樣沒有任何意義，在使用時應該有充足的邏輯判斷。
2.onStartDrag 拖動開始時發生
$( #box ).draggable({ onStartDrag : function (e) { alert( 拖動開始時觸發！  //return false;});
在鼠標點擊后拖動的一瞬間執行，執行時間在onBeforeDrag之后。
3.onDrag拖拽過程中執行
$( #box ).draggable({ onDrag : function (e) { alert( 拖動過程中觸發！ 在拖
動的過程中執行，當鼠標一移動就會執行，當不能拖動時返回false
4.onStopDrag 拖動停止后發生
$( #box ).draggable({ onStopDrag : function (e) { alert( 在拖動停止時觸發！ });
在拖動結束后觸發，即松開鼠標時執行，無返回值。
5.以上事件可組合使用，執行順序為onBeforeDrag -- onBeforeDrag -- onDrag -- onStopDrag
$( #box ).draggable({ onBeforeDrag : function (e) { alert( 拖動之前觸發！  //return false; onStartDrag : function (e) { alert( 拖動時觸發！  onDrag : function (e) { alert( 拖動過程中觸發！  onStopDrag : function (e) { alert( 在拖動停止時觸發！ },});
三、方法（第三是方法）
方法名：說明
option ：返回屬性對象
proxy ：如果代理屬性被設置則返回該拖動代理元素
enabl ：允許拖
disable ：禁止拖動
//返回屬性對象console.log($( #box ).draggable( options //返回代理元素onStartDrag : function (e) {console.log($( #box ).draggable( proxy //禁止拖動$( #box ).draggable( disable //允許拖放$( #box ).draggable( enable 
四、設置默認屬性（這是最后一個設置）
在一次設置后當前頁面所有拖拽都會共享這個屬性，不用再去設置。
$(function(){ $.fn.draggable.defaults.cursor = text });
以上就是這篇關于draggable屬性的頁面拖動方面的全部內容了（想學更多就來PHP ），有問題的可以在下方提問。
【小編推薦】
html中的ol標簽如何去掉標號呢？ ol 標簽的使用方法總結
HTML中ul標簽如何去掉點？HTML無序列表的樣式實例解析
以上就是html5draggable屬性是如何做到頁面拖動效果的？方法總結在這里！的詳細內容，其它編程語言        
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。