Javascript基于jQuery UI實(shí)現(xiàn)選中區(qū)域拖拽效果
一、效果展示
普通的三個(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ū)域拖拽效果,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
- 淺析JavaScript動(dòng)畫模擬拖拽原理
- 原生js實(shí)現(xiàn)彈出層登錄拖拽功能
- js實(shí)現(xiàn)小窗口拖拽效果
- JavaScript實(shí)現(xiàn)拖拽元素對(duì)齊到網(wǎng)格(每次移動(dòng)固定距離)
- 基于JavaScript實(shí)現(xiàn)右鍵菜單和拖拽功能
- Sortable.js拖拽排序使用方法解析
- 完美的js div拖拽實(shí)例代碼
- JS實(shí)現(xiàn)放大、縮小及拖拽圖片的方法【可兼容IE、火狐】
- NodeJS與HTML5相結(jié)合實(shí)現(xiàn)拖拽多個(gè)文件上傳到服務(wù)器的實(shí)現(xiàn)方法
- JS HTML5拖拽上傳圖片預(yù)覽
- JS HTML5實(shí)現(xiàn)拖拽移動(dòng)列表效果
- 利用JavaScript實(shí)現(xiàn)拖拽改變?cè)卮笮?/a>
相關(guān)文章
JXTree對(duì)象,讀取外部xml文件數(shù)據(jù),生成樹的函數(shù)
JXTree對(duì)象,讀取外部xml文件數(shù)據(jù),生成樹的函數(shù)...2007-04-04在Postman的腳本中如何使用pm對(duì)象獲取接口的請(qǐng)求參數(shù)
這篇文章主要介紹了在Postman的腳本中如何使用pm對(duì)象獲取接口的請(qǐng)求參數(shù),本文通過實(shí)例代碼圖文相結(jié)合給大家介紹的非常詳細(xì),需要的朋友可以參考下2023-09-09Jupyter Notebook運(yùn)行JavaScript的方法
Jupyter Notebook是一塊所見即所得的畫布,通過在瀏覽器上編輯代碼,讓開發(fā)人員實(shí)現(xiàn)展示與快速迭代的利器,本文主要介紹了Jupyter Notebook運(yùn)行JavaScript的方法,感興趣的可以了解一下2021-05-05js判斷復(fù)選框是否選中及選中個(gè)數(shù)的實(shí)現(xiàn)代碼
下面小編就為大家?guī)硪黄猨s判斷復(fù)選框是否選中及選中個(gè)數(shù)的實(shí)現(xiàn)代碼。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-05-05