jQuery EasyUI中拖拽事件的使用方法

發(fā)布時(shí)間：2020-08-29 10:55:28 來(lái)源：億速云閱讀：272 作者：小新欄目：web開(kāi)發(fā)

這篇文章主要介紹了jQuery EasyUI中拖拽事件的使用方法，具有一定借鑒價(jià)值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

jQueryEasyUI中的拖拽事件通過(guò)給它設(shè)置代理元素使其拖拽、可設(shè)置拖動(dòng)元素相對(duì)于x.y軸拖動(dòng)，可設(shè)置拖拽何時(shí)停止等效果

jQuery中的easyui是一個(gè)非常好用的插件，它雖然使用簡(jiǎn)單方便，但是它的功能確十分強(qiáng)大，今天將向大家介紹如何使用easyui插件實(shí)現(xiàn)基本的拖動(dòng)和放置，有一定的參考價(jià)值，希望對(duì)大家有所幫助。

【推薦課程：jQueryEasyUI教程】

jQuery EasyUI中拖拽事件的使用方法

Draggable(拖拽)

Draggable是easyui中用于實(shí)現(xiàn)拖拽功能的一個(gè)插件，通過(guò)它我們可以實(shí)現(xiàn)對(duì)控件的拖拽效果。

它具有以下屬性值：

屬性名	含義
proxy	指拖動(dòng)時(shí)要使用的代理元素，設(shè)置為clone時(shí)，克隆元素將被用作代理；如果指定一個(gè)函數(shù)，它必須返回一個(gè) jQuery 對(duì)象。
revert	是一個(gè)boolean值，設(shè)置為 true時(shí)表示拖動(dòng)結(jié)束后元素將返回它的開(kāi)始位置。（默認(rèn)值為false）
cursor	拖動(dòng)時(shí)的 css 光標(biāo)，默認(rèn)值為move
deltaX	指的是拖動(dòng)的元素相對(duì)于當(dāng)前光標(biāo)的 X 軸的位置，默認(rèn)值為null
deltaY	指的是拖動(dòng)的元素相對(duì)于當(dāng)前光標(biāo)的 Y 軸位置，默認(rèn)值為null
handle	指啟動(dòng)可拖動(dòng)元素的處理，默認(rèn)值為null
disabled	是一個(gè)boolean值，如果設(shè)置為 true，則停止可拖動(dòng)，默認(rèn)值為false
edge	指能夠在其中開(kāi)始可拖動(dòng)的拖動(dòng)寬度，默認(rèn)值為0
axis	指定義拖動(dòng)元素可在其上移動(dòng)的軸，可用的值是 'v' 或 'h'，當(dāng)設(shè)為 null，將會(huì)沿著 'v' 和 'h' 的方向移動(dòng)

案例分析：

通過(guò)三個(gè)div元素來(lái)啟用它們的拖動(dòng)和放置

外部引用必須有的插件

<link rel="stylesheet" type="text/css" href="D:\jquery-easyui-1.6.10\themes\default\easyui.css">
<link rel="stylesheet" type="text/css" href="D:\jquery-easyui-1.6.10\themes\icon.css">
<script src="D:\jquery-easyui-1.6.10\jquery.min.js"></script>
<script src="D:\jquery-easyui-1.6.10\jquery.easyui.min.js"></script>

HTML與CSS代碼

<style>
	div{
	width:100px;
	height: 100px;
	margin-bottom:5px;
	text-align: center;
	 line-height: 100px;

	}
	#box1{background: pink;}
	#box2{background: skyblue;}
	#box3{background: yellow;}
</style>
</head>
<body>
<div id="box1">box1</div>
<div id="box2">box2</div>
<div id="box3">box3</div>

效果圖：

jQuery EasyUI中拖拽事件的使用方法

設(shè)置box1元素為可拖動(dòng)的

 $('#box1').draggable();

效果圖：

jQuery EasyUI中拖拽事件的使用方法

對(duì)于box2通過(guò)給原來(lái)的元素的代理（proxy）創(chuàng)建一個(gè)clone值，讓其可以拖動(dòng)

$('#box2').draggable({
        proxy:'clone'
    });

效果圖：

jQuery EasyUI中拖拽事件的使用方法

第三個(gè)box我們?cè)O(shè)置元素只能在v軸上拖動(dòng)：

$("#box3").draggable({
            axis: 'v'
  })

效果圖：

jQuery EasyUI中拖拽事件的使用方法

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享jQuery EasyUI中拖拽事件的使用方法內(nèi)容對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，遇到問(wèn)題就找億速云，詳細(xì)的解決方法等著你來(lái)學(xué)習(xí)!

向AI問(wèn)一下細(xì)節(jié)

jQuery EasyUI中拖拽事件的使用方法

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽