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

更新時間：2016年11月25日 13:58:30 作者：懶得安分

這篇文章主要介紹了Javascript基于jQuery UI實現(xiàn)選中區(qū)域拖拽效果的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下

一、效果展示

普通的三個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)站的支持！

您可能感興趣的文章:

相關(guān)文章

javascript 返回數(shù)組中不重復(fù)的元素
返回數(shù)組中不重復(fù)的元素的js實現(xiàn)代碼。
2009-12-12
選擇指定數(shù)量后checkbox不可選(變灰)javascript代碼
選擇指定數(shù)量后checkbox不可選(變灰)javascript代碼
2009-06-06
輕松5句話解決JavaScript的作用域
作用域（scope）是javascript語言的基石之一，在構(gòu)建復(fù)雜程序時可能是最頭痛的東西,所以這里羅列了五句話輕松搞定并且附上了示例。給需要的朋友參考學(xué)習(xí)。
2016-07-07
gulp-htmlmin壓縮html的gulp插件實例代碼
這篇文章主要介紹了gulp-htmlmin壓縮html的gulp插件實例代碼的相關(guān)資料,需要的朋友可以參考下
2016-06-06
JavaScript設(shè)計模式發(fā)布訂閱模式
這篇文章主要介紹了JavaScript設(shè)計模式發(fā)布訂閱模式，發(fā)布訂閱設(shè)計模式是和觀察者設(shè)計模式基本上相同，但是他們兩個設(shè)計模式不同的是發(fā)布訂閱者擁有一個事件處理中心而觀察者并沒有
2022-06-06
javascript下漢字和Unicode編碼互轉(zhuǎn)代碼
這個是就是把漢字和Unicode編碼互轉(zhuǎn)的javascript代碼，也是從網(wǎng)上找到了，也許有人用得著??！
2010-10-10
VS?Code中搭建JavaScript運行環(huán)境超詳細(xì)過程
這篇文章主要介紹了JavaScript從瀏覽器到服務(wù)端的演變,以及如何在VSCode中安裝和配置Node.js和相關(guān)插件來運行JavaScript代碼,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下
2025-04-04
jQuery實現(xiàn)為控件添加水印文字效果(附源碼)
這篇文章主要介紹了jQuery實現(xiàn)為控件添加水印文字效果的方法,涉及jQuery插件jquery.tinywatermark.js的使用技巧,并提供了源碼供讀者下載參考,需要的朋友可以參考下
2015-12-12
js內(nèi)存泄露的幾種情況詳細(xì)探討
內(nèi)存泄露是指一塊被分配的內(nèi)存既不能使用，又不能回收，直到瀏覽器進(jìn)程結(jié)束，由于瀏覽器垃圾回收方法有bug，會產(chǎn)生內(nèi)存泄露，下面與大家詳細(xì)探討下內(nèi)存泄露的幾種情況
2013-05-05
JS實現(xiàn)圖片幻燈片效果代碼實例
這篇文章主要介紹了JS實現(xiàn)圖片幻燈片效果代碼實例,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
2020-05-05