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获取css z-index在各种浏览器中的返回值
Sep 15 Javascript
javascript实现简单的鼠标拖动效果实例
Apr 10 Javascript
javascript判断并获取注册表中可信任站点的方法
Jun 01 Javascript
jQuery悬停文字提示框插件jquery.tooltipster.js用法示例【附demo源码下载】
Jul 19 Javascript
移动端翻页插件dropload.js(支持Zepto和jQuery)
Jul 27 Javascript
bootstrap3使用bootstrap datetimepicker日期插件
May 24 Javascript
bootstrap可编辑下拉框jquery.editable-select
Oct 12 jQuery
使用Vue实现图片上传的三种方式
Jul 17 Javascript
微信小程序dom操作的替代思路实例分析
Dec 06 Javascript
微信小程序textarea层级过高的解决方法
Mar 04 Javascript
vue项目使用.env文件配置全局环境变量的方法
Oct 24 Javascript
JS快速实现简单计算器
Apr 08 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 中的输出缓冲
2006/12/21 PHP
PHP json格式和js json格式 js跨域调用实现代码
2012/09/08 PHP
php 数组元素快速去重
2017/05/05 PHP
一个JS小玩意 几个属性相加不能超过一个特定值.
2009/09/29 Javascript
jQuery点击后一组图片左右滑动的实现代码
2012/08/16 Javascript
在JS中解析HTML字符串示例代码
2014/04/16 Javascript
html文档中的location对象属性理解及常见的用法
2014/08/13 Javascript
jQuery简单实现日历的方法
2015/05/04 Javascript
jQuery仿gmail实现fixed布局的方法
2015/05/27 Javascript
jQuery中extend()和fn.extend()方法详解
2015/06/03 Javascript
cocos2dx骨骼动画Armature源码剖析(一)
2015/09/08 Javascript
AngualrJS中的Directive制作一个菜单
2016/01/26 Javascript
使用伪命名空间封装保护独自创建的对象方法
2016/08/04 Javascript
浅析BootStrap中Modal(模态框)使用心得
2016/12/24 Javascript
AngularJS实现路由实例
2017/02/12 Javascript
jQuery操作之效果详解
2017/05/19 jQuery
vue2.0 axios前后端数据处理实例代码
2017/06/30 Javascript
webpack多页面开发实践
2017/12/18 Javascript
node 命令方式启动修改端口的方法
2018/05/12 Javascript
微信小程序当前时间时段选择器插件使用方法详解
2018/12/28 Javascript
利用Bootstrap Multiselect实现下拉框多选功能
2019/04/08 Javascript
js实现带搜索功能的下拉框
2020/01/11 Javascript
[39:00]Optic vs VP 2018国际邀请赛淘汰赛BO3 第三场 8.24
2018/08/25 DOTA
python网络编程之UDP通信实例(含服务器端、客户端、UDP广播例子)
2014/04/25 Python
Python读大数据txt
2016/03/28 Python
朴素贝叶斯分类算法原理与Python实现与使用方法案例
2018/06/26 Python
使用Python更换外网IP的方法
2018/07/09 Python
python 实现交换两个列表元素的位置示例
2019/06/26 Python
Python unittest单元测试框架及断言方法
2020/04/15 Python
突袭HTML5之Javascript API扩展3—本地存储全新体验
2013/01/31 HTML / CSS
如何使用canvas绘制可移动网格的示例代码
2020/12/14 HTML / CSS
DJI大疆无人机官方商城:全球领先的无人飞行器研发和生产商
2016/12/21 全球购物
介绍一下mysql的日期和时间函数
2013/03/28 面试题
晚会闭幕词
2015/01/28 职场文书
2015年小学生国庆节演讲稿
2015/07/30 职场文书
MySQL基于索引的压力测试的实现
2021/11/07 MySQL