Javascript基于jQuery UI实现选中区域拖拽效果


Posted in Javascript onNovember 25, 2016

一、效果展示

普通的三个div

Javascript基于jQuery UI实现选中区域拖拽效果

鼠标拖动选中效果

Javascript基于jQuery UI实现选中区域拖拽效果

选中所有的div

Javascript基于jQuery UI实现选中区域拖拽效果

这样貌似看不出效果,没关系,我们有神奇的gif动画,来一个整体的动画效果感受下。

Javascript基于jQuery UI实现选中区域拖拽效果

二、代码实现

整个代码其实也不难,需要用到一个博主自己封装的js文件。

AreaSelect.js

考虑到代码量有点大,并且知乎没有代码折叠功能,所以这里就留一个文件名。等博主抽时间将它开源到github上面去,当然,有需要的朋友也可以直接联系博主,博主免费提供!

引入这个js后,还需要引用jquery和jquery UI相关文件。

<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实现选中区域拖拽效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jQuery插件开发基础简单介绍
Jan 07 Javascript
javascript 中__proto__和prototype详解
Nov 25 Javascript
jQuery中prepend()方法使用详解
Aug 11 Javascript
Angular2  NgModule 模块详解
Oct 19 Javascript
AngularJs验证重复密码的方法(两种)
Nov 25 Javascript
Bootstrap的class样式小结
Dec 01 Javascript
JavaScript数组、json对象、eval()函数用法实例分析
Feb 21 Javascript
微信小程序实现获取用户信息并存入数据库操作示例
May 07 Javascript
js实现漂亮的星空背景
Nov 01 Javascript
vue-cli3项目配置eslint代码规范的完整步骤
Sep 10 Javascript
jQuery实现增删改查
Dec 22 jQuery
JavaScript实现栈结构详细过程
Dec 06 Javascript
bootstrap-datetimepicker实现只显示到日期的方法
Nov 25 #Javascript
利用angular.copy取消变量的双向绑定与解析
Nov 25 #Javascript
JS冒泡事件与事件捕获实例详解
Nov 25 #Javascript
js事件源window.event.srcElement兼容性写法(详解)
Nov 25 #Javascript
使用JS读取XML文件的方法
Nov 25 #Javascript
JS比较两个数值的大小实例
Nov 25 #Javascript
使用JavaScript解决网页图片拉伸问题(推荐)
Nov 25 #Javascript
You might like
PHP 线程安全与非线程安全版本的区别深入解析
2013/08/06 PHP
php判断两个浮点数是否相等的方法
2015/03/14 PHP
js或者jquery判断图片是否加载完成实现代码
2013/03/20 Javascript
使用JS或jQuery模拟鼠标点击a标签事件代码
2014/03/10 Javascript
nodejs中转换URL字符串与查询字符串详解
2014/11/26 NodeJs
jquery图片播放浏览插件prettyPhoto使用详解
2014/12/19 Javascript
javaScript中push函数用法实例分析
2015/06/08 Javascript
jquery实现横向图片轮播特效代码分享
2015/11/19 Javascript
基于JS+Canves实现点击按钮水波纹效果
2016/09/15 Javascript
微信小程序 传值取值的几种方法总结
2017/01/16 Javascript
jQuery插件zTree实现的多选树效果示例
2017/03/08 Javascript
ES6入门教程之Class和Module详解
2017/05/17 Javascript
JS全角与半角转化实例(分享)
2017/07/04 Javascript
微信小程序开发之点击按钮退出小程序的实现方法
2019/04/26 Javascript
jQuery事件模型默认行为执行顺序及trigger()与 triggerHandler()比较实例分析
2020/04/30 jQuery
js实现简单抽奖功能
2020/11/24 Javascript
在vue中使用vant TreeSelect分类选择组件操作
2020/11/02 Javascript
Python入门教程之运算符与控制流
2016/08/17 Python
python模仿网页版微信发送消息功能
2018/02/24 Python
详解通过API管理或定制开发ECS实例
2018/09/30 Python
Python求离散序列导数的示例
2019/07/10 Python
Windows下pycharm安装第三方库失败(通用解决方案)
2020/09/17 Python
python爬虫爬取淘宝商品比价(附淘宝反爬虫机制解决小办法)
2020/12/03 Python
CSS 说明横向进度条最后显示文字的实现代码
2020/11/10 HTML / CSS
Foot Locker德国官方网站:美国运动服和鞋类零售商
2018/11/01 全球购物
精灵市场:Pixie Market
2019/06/18 全球购物
澳大利亚第一旅行车和房车配件店:Caravan RV Camping
2020/12/26 全球购物
测绘工程系学生的自我评价
2013/11/30 职场文书
入学申请自荐信范文
2014/02/26 职场文书
表决心的诗句大全
2014/03/11 职场文书
《三亚落日》教学反思
2014/04/26 职场文书
2014党员自我评议表范文
2014/09/20 职场文书
写给父母的感谢信
2015/01/22 职场文书
2015年初中生自我评价范文
2015/03/03 职场文书
Python答题卡识别并给出分数的实现代码
2021/06/22 Python
游戏《我的世界》澄清Xbox版暂无计划加入光追
2022/04/03 其他游戏