欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Javascript基于jQuery UI實(shí)現(xiàn)選中區(qū)域拖拽效果

 更新時(shí)間：2016年11月25日 13:58:30   作者：懶得安分  
這篇文章主要介紹了Javascript基于jQuery UI實(shí)現(xiàn)選中區(qū)域拖拽效果的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下

一、效果展示

普通的三個(gè)div

鼠標(biāo)拖動(dòng)選中效果

選中所有的div

這樣貌似看不出效果，沒關(guān)系，我們有神奇的gif動(dòng)畫，來一個(gè)整體的動(dòng)畫效果感受下。

二、代碼實(shí)現(xiàn)

整個(gè)代碼其實(shí)也不難，需要用到一個(gè)博主自己封裝的js文件。

AreaSelect.js

考慮到代碼量有點(diǎn)大，并且知乎沒有代碼折疊功能，所以這里就留一個(gè)文件名。等博主抽時(shí)間將它開源到github上面去，當(dāng)然，有需要的朋友也可以直接聯(lián)系博主，博主免費(fèi)提供！

引入這個(gè)js后，還需要引用jquery和jquery UI相關(guān)文件。

<script src="Scripts/jquery-1.10.2.js"></script>
<script src="Content/jquery-ui-1.11.4.custom/jquery-ui.js"></script>
<link href="Content/jquery-ui-1.11.4.custom/jquery-ui.min.css" rel="stylesheet" />
<script src="Scripts/Common/SelectArea.js"></script>

因?yàn)槲募?，然后剩下的就是html和js初始化了

<body>
<div id="divCenter">
<div id="div1" style="position:absolute;width:200px;height:150px;left:200px;top:50px;cursor:pointer;">div2</div>
<div id="div2" style="position:absolute;width:200px;height:150px;left:450px;top:200px;cursor:pointer;">div2</div>
<div id="div3" style="position:absolute;width:200px;height:150px;left:700px;top:390px;cursor:pointer;">div3</div>
</div>
</body>
$(function () {
$("#divCenter div").draggable({
scope: "plant",
start: function () {
startMove();
},
drag: function (event, ui) {
MoveSelectDiv(event, ui, $(this).attr("id"));
},
});
oRegionSelect = new RegionSelect({
region: '#divCenter div',
selectedClass: 'seled',
parentId: "divCenter"
});
oRegionSelect.select();
});

以上所述是小編給大家介紹的Javascript基于jQuery UI實(shí)現(xiàn)選中區(qū)域拖拽效果，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

相關(guān)文章

最新評論