html5中draggable屬性是怎么做到頁(yè)面拖動(dòng)效果的

小編給大家分享一下html5中draggable屬性是怎么做到頁(yè)面拖動(dòng)效果的，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！

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

1.css樣式加載：

<div id="box" class="easyui-draggable" style="width:200px;height:150px;background:#F5F6F7;">
    內(nèi)容部分
</div>

使用css樣式加載Draggable，方便快捷，但是不利于管理，所以我們有課第二種加載方式，使用Jquery方式加載，一般我們都會(huì)使用Jquery的方式進(jìn)行加載。

2.Jquery方式加載：

//不加屬性
$('#box').draggable();
//JS部分
$('#box').draggable({
    revert : true,        //拖動(dòng)后是否回到起始位置，boolean類型
    cursor : 'text',       //鼠標(biāo)拖拽樣式，十字，文本等
    handle : '#pox',       //句柄，設(shè)置后只在設(shè)置后只能在當(dāng)前元素下實(shí)現(xiàn)拖拽
    disabled : false,       //設(shè)置是否可以被拖拽
    edge : 50,          //設(shè)置邊界往內(nèi)多大距離可以實(shí)現(xiàn)拖拽
    axis : 'v',          //設(shè)置拖拽方向，v：垂直拖拽，h：水平拖拽
    proxy: 'clone',        //設(shè)置代理元素，使用clone時(shí)為復(fù)制當(dāng)前元素
    deltaX : 10,         //被拖拽元素左上角距離當(dāng)前光標(biāo)的X軸方向的距離
    deltaY : 10,         //被拖拽元素左上角距離當(dāng)前光標(biāo)的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;">
    內(nèi)容部分
</div>

二、事件（第二是事件）

1.onBeforeDrag 拖動(dòng)前發(fā)生

$('#box').draggable({
    onBeforeDrag : function (e) {
        alert('拖動(dòng)之前觸發(fā)！');
        //return false;
    }
});

在拖動(dòng)前發(fā)生，既當(dāng)鼠標(biāo)點(diǎn)擊元素時(shí)發(fā)生，當(dāng)返回false時(shí)將無(wú)法拖拽，我們不會(huì)讓它直接返回false，因?yàn)檫@樣沒(méi)有任何意義，在使用時(shí)應(yīng)該有充足的邏輯判斷。

2.onStartDrag 拖動(dòng)開(kāi)始時(shí)發(fā)生

$('#box').draggable({
    onStartDrag : function (e) {
        alert('拖動(dòng)開(kāi)始時(shí)觸發(fā)！');
        //return false;
    }
});

在鼠標(biāo)點(diǎn)擊后拖動(dòng)的一瞬間執(zhí)行，執(zhí)行時(shí)間在onBeforeDrag之后。

3.onDrag拖拽過(guò)程中執(zhí)行

$('#box').draggable({
    onDrag : function (e) {
        alert('拖動(dòng)過(guò)程中觸發(fā)！');
    }
});
在拖

動(dòng)的過(guò)程中執(zhí)行，當(dāng)鼠標(biāo)一移動(dòng)就會(huì)執(zhí)行，當(dāng)不能拖動(dòng)時(shí)返回false

4.onStopDrag 拖動(dòng)停止后發(fā)生

$('#box').draggable({
    onStopDrag : function (e) {
        alert('在拖動(dòng)停止時(shí)觸發(fā)！');
    }
});

在拖動(dòng)結(jié)束后觸發(fā)，即松開(kāi)鼠標(biāo)時(shí)執(zhí)行，無(wú)返回值。

5.以上事件可組合使用，執(zhí)行順序?yàn)閛nBeforeDrag --> onBeforeDrag --> onDrag --> onStopDrag

$('#box').draggable({
    onBeforeDrag : function (e) {
         alert('拖動(dòng)之前觸發(fā)！');
        //return false;
    },
    onStartDrag : function (e) {
       alert('拖動(dòng)時(shí)觸發(fā)！');
    },
    onDrag : function (e) {
        alert('拖動(dòng)過(guò)程中觸發(fā)！');
    },
    onStopDrag : function (e) {
        alert('在拖動(dòng)停止時(shí)觸發(fā)！');
},});

三、方法（第三是方法）

方法名：說(shuō)明

• option ：返回屬性對(duì)象

• proxy ：如果代理屬性被設(shè)置則返回該拖動(dòng)代理元素

• enabl ：允許拖

• disable ：禁止拖動(dòng)

//返回屬性對(duì)象
console.log($('#box').draggable('options'));
//返回代理元素
onStartDrag : function (e) {
console.log($('#box').draggable('proxy'));
},
//禁止拖動(dòng)
$('#box').draggable('disable');
//允許拖放
$('#box').draggable('enable');

四、設(shè)置默認(rèn)屬性（這是最后一個(gè)設(shè)置）

在一次設(shè)置后當(dāng)前頁(yè)面所有拖拽都會(huì)共享這個(gè)屬性，不用再去設(shè)置。

$(function(){
    $.fn.draggable.defaults.cursor = 'text';
});

看完了這篇文章，相信你對(duì)html5中draggable屬性是怎么做到頁(yè)面拖動(dòng)效果的有了一定的了解，想了解更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！