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 相关文章推荐
javascript scrollTop正解使用方法
Nov 14 Javascript
为Javascript中的String对象添加去除左右空格的方法(示例代码)
Nov 30 Javascript
javascript里使用php代码实例
Dec 13 Javascript
node.js中的fs.lstat方法使用说明
Dec 16 Javascript
jQuery实现个性翻牌效果导航菜单的方法
Mar 09 Javascript
jquery实现标签支持图文排列带上下箭头按钮的选项卡
Mar 14 Javascript
js文字横向滚动特效
Nov 11 Javascript
jQuery实现页面评论栏中访客信息自动填写功能的方法
May 23 Javascript
json实现添加、遍历与删除属性的方法
Jun 17 Javascript
vue环境搭建简单教程
Nov 07 Javascript
解决Layui中templet中a的onclick参数传递的问题
Sep 20 Javascript
在Angular项目使用socket.io实现通信的方法
Jan 05 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
为查询结果建立向后/向前按钮
2006/10/09 PHP
用PHP和ACCESS写聊天室(二)
2006/10/09 PHP
PHP入门教程之正则表达式基本用法实例详解(正则匹配,搜索,分割等)
2016/09/11 PHP
ThinkPHP5.0框架使用build 自动生成模块操作示例
2019/04/11 PHP
JS 分号引起的一段调试问题
2009/06/18 Javascript
JavaScript Event学习第十一章 按键的检测
2010/02/10 Javascript
js解析与序列化json数据(一)json.stringify()的基本用法
2013/02/01 Javascript
JavaScript作用域链示例分享
2014/05/27 Javascript
jQuery中extend函数详解
2015/07/13 Javascript
深入探究JavaScript中for循环的效率问题及相关优化
2016/03/13 Javascript
NodeJS与HTML5相结合实现拖拽多个文件上传到服务器的实现方法
2016/07/26 NodeJs
解析Javascript单例模式概念与实例
2016/12/05 Javascript
JS原型与原型链的深入理解
2017/02/15 Javascript
Angular JS 生成动态二维码的方法
2017/02/23 Javascript
原生js的ajax和解决跨域的jsonp(实例讲解)
2017/10/16 Javascript
Vue SSR 组件加载问题
2018/05/02 Javascript
vue实现设置载入动画和初始化页面动画效果
2019/10/28 Javascript
详解如何在Javascript和Sass之间共享变量
2019/11/13 Javascript
vue实现购物车选择功能
2020/01/10 Javascript
微信小程序保存图片到相册权限设置
2020/04/09 Javascript
RxJS在TypeScript中的简单使用详解
2020/04/13 Javascript
JS性能优化实现方法及优点进行
2020/08/30 Javascript
[02:19]DOTA选手解说齐贺岁
2018/02/11 DOTA
python利用OpenCV2实现人脸检测
2020/04/16 Python
在pandas中一次性删除dataframe的多个列方法
2018/04/10 Python
Python地图绘制实操详解
2019/03/04 Python
numpy concatenate数组拼接方法示例介绍
2019/05/27 Python
对Python中class和instance以及self的用法详解
2019/06/26 Python
django框架面向对象ORM模型继承用法实例分析
2019/07/29 Python
Python基于staticmethod装饰器标示静态方法
2020/10/17 Python
驴妈妈旅游网:中国新型的B2C旅游电子商务网站
2016/08/16 全球购物
专科毕业生学习生活的自我评价
2013/10/26 职场文书
五四青年节活动总结
2015/02/10 职场文书
贷款担保书范本
2015/09/22 职场文书
2016五一劳动节慰问信
2015/11/30 职场文书
Java 获取Word中所有的插入和删除修订的方法
2022/04/06 Java/Android