這篇文章主要為大家講述的技術關於draggable屬性實現頁面拖動的效果，往下讀下去，一步步的你會發現這個其實也不是很難，現在讓我們一起來看這篇文章吧
這篇文章就是介紹Draggable(拖曳)即實現頁面元素的拖曳效果的，所以，一步一步的來。
一、載入方式（首先是載入方式）
#1.css樣式載入：
<div id="box" class="easyui-draggable" style="width:200px;height:150px;background:#F5F6F7;">
内容部分
</div>登入後複製
使用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 style="border:1px solid
#ccc;width:400px;height:200px;"></div>');
p.html($(source).html()).appendTo('body');
return p;
},
});
//HTML部分
<div id="box" style="width:400px;height:200px;background:red;">
内容部分
</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('在拖动停止时触发！');
},});登入後複製
三、方法（第三是方法）
方法名稱：說明
//返回属性对象
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標籤如何去掉標號呢？ 標籤的使用方法總結
HTML中ul標籤如何去掉點？ HTML無序列表的樣式實例解析
#
以上是html5draggable屬性是如何做到頁面拖曳效果的？方法總結在這裡！的詳細內容。更多資訊請關注PHP中文網其他相關文章！
