Javascript基于jQuery UI實現(xiàn)選中區(qū)域拖拽效果
一、效果展示
普通的三個div
鼠標(biāo)拖動選中效果
選中所有的div
這樣貌似看不出效果,沒關(guān)系,我們有神奇的gif動畫,來一個整體的動畫效果感受下。
二、代碼實現(xiàn)
整個代碼其實也不難,需要用到一個博主自己封裝的js文件。
AreaSelect.js
考慮到代碼量有點大,并且知乎沒有代碼折疊功能,所以這里就留一個文件名。等博主抽時間將它開源到github上面去,當(dāng)然,有需要的朋友也可以直接聯(lián)系博主,博主免費提供!
引入這個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>
因為文件之后,然后剩下的就是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實現(xiàn)選中區(qū)域拖拽效果,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
- 淺析JavaScript動畫模擬拖拽原理
- 原生js實現(xiàn)彈出層登錄拖拽功能
- js實現(xiàn)小窗口拖拽效果
- JavaScript實現(xiàn)拖拽元素對齊到網(wǎng)格(每次移動固定距離)
- 基于JavaScript實現(xiàn)右鍵菜單和拖拽功能
- Sortable.js拖拽排序使用方法解析
- 完美的js div拖拽實例代碼
- JS實現(xiàn)放大、縮小及拖拽圖片的方法【可兼容IE、火狐】
- NodeJS與HTML5相結(jié)合實現(xiàn)拖拽多個文件上傳到服務(wù)器的實現(xiàn)方法
- JS HTML5拖拽上傳圖片預(yù)覽
- JS HTML5實現(xiàn)拖拽移動列表效果
- 利用JavaScript實現(xiàn)拖拽改變元素大小
相關(guān)文章
JXTree對象,讀取外部xml文件數(shù)據(jù),生成樹的函數(shù)
JXTree對象,讀取外部xml文件數(shù)據(jù),生成樹的函數(shù)...2007-04-04在Postman的腳本中如何使用pm對象獲取接口的請求參數(shù)
這篇文章主要介紹了在Postman的腳本中如何使用pm對象獲取接口的請求參數(shù),本文通過實例代碼圖文相結(jié)合給大家介紹的非常詳細(xì),需要的朋友可以參考下2023-09-09Jupyter Notebook運行JavaScript的方法
Jupyter Notebook是一塊所見即所得的畫布,通過在瀏覽器上編輯代碼,讓開發(fā)人員實現(xiàn)展示與快速迭代的利器,本文主要介紹了Jupyter Notebook運行JavaScript的方法,感興趣的可以了解一下2021-05-05js判斷復(fù)選框是否選中及選中個數(shù)的實現(xiàn)代碼
下面小編就為大家?guī)硪黄猨s判斷復(fù)選框是否選中及選中個數(shù)的實現(xiàn)代碼。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-05-05