html5draggable屬性是如何做到頁面拖動效果的？方法總結在這裡！

本篇文章主要為大家講述的技術關於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('在拖動停止時觸發！');},});

三、方法（第三是方法）

方法名：說明

• 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屬性的頁面拖動方面的全部內容了（想學更多就來topic.alibabacloud.com），有問題的可以在下方提問。