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 = $(&#39;<div style="border:1px solid
    #ccc;width:400px;height:200px;"></div>&#39;);
    p.html($(source).html()).appendTo(&#39;body&#39;);
    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屬性的頁面拖曳方面的全部內容了（想學更多就來PHP中文網），有問題的可以在下方提問。

【小編推薦】

html中的ol標籤如何去掉標號呢？

標籤的使用方法總結

HTML中ul標籤如何去掉點？ HTML無序列表的樣式實例解析

#

以上是html5draggable屬性是如何做到頁面拖曳效果的？方法總結在這裡！的詳細內容。更多資訊請關注PHP中文網其他相關文章！