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之dhDataGrid Ver2.0.0代码
Jul 01 Javascript
javascript jscroll模拟html元素滚动条
Dec 18 Javascript
使用vue.js开发时一些注意事项
Apr 27 Javascript
Node.js+Express配置入门教程
May 19 Javascript
完美JQuery图片切换效果的简单实现
Jul 21 Javascript
JavaScript中自带的 reduce()方法使用示例详解
Aug 10 Javascript
node网页分段渲染详解
Sep 05 Javascript
javascript 中的事件委托详解
Oct 25 Javascript
vue-cli项目如何使用vue-resource获取本地的json数据(模拟服务端返回数据)
Aug 04 Javascript
使用vue-router完成简单导航功能【推荐】
Jun 28 Javascript
webpack自动打包和热更新的实现方法
Jun 24 Javascript
javascript设计模式 ? 访问者模式原理与用法实例分析
Apr 26 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中用于检测一个地理IP地址是否可用的代码
2012/02/19 PHP
php 判断是否是中文/英文/数字示例代码
2013/09/30 PHP
PHP轻量级数据库操作类Medoo增加、删除、修改、查询例子
2014/07/04 PHP
php根据年月获取当月天数及日期数组的方法
2016/11/30 PHP
jquery实现图片渐变切换兼容ie6/Chrome/Firefox
2013/08/02 Javascript
js获取php变量的实现代码
2013/08/10 Javascript
鼠标移到图片上变大显示而不是放大镜效果
2014/06/15 Javascript
使用jQuery实现图片遮罩半透明坠落遮挡
2015/03/16 Javascript
JavaScript中的parse()方法使用简介
2015/06/12 Javascript
百度地图API之本地搜索与范围搜索
2015/07/30 Javascript
CSS中position属性之fixed实现div居中
2015/12/14 Javascript
浅析js绑定事件的常用方法
2016/05/15 Javascript
Angularjs过滤器使用详解
2016/05/25 Javascript
Vuex之理解Mutations的用法实例
2017/04/19 Javascript
jQuery实现动态删除LI的方法
2017/05/30 jQuery
jQuery.Ajax()的data参数类型详解
2017/07/23 jQuery
vue项目中使用百度地图的方法
2018/06/08 Javascript
解决vue 绑定对象内点击事件失效问题
2018/09/05 Javascript
javascript实现前端input密码输入强度验证
2020/06/24 Javascript
VUE实现吸底按钮
2021/03/04 Vue.js
Python多进程同步Lock、Semaphore、Event实例
2014/11/21 Python
Python实现随机生成手机号及正则验证手机号的方法
2018/04/25 Python
python实现点击按钮修改数据的方法
2019/07/17 Python
Python字典底层实现原理详解
2019/12/18 Python
python字典和json.dumps()的遇到的坑分析
2020/03/11 Python
Python数据可视化实现多种图例代码详解
2020/07/14 Python
英国羊绒服装购物网站:Pure Collection
2018/10/22 全球购物
P D PAOLA意大利官网:西班牙著名的珠宝首饰品牌
2019/09/24 全球购物
西部世纪面试题
2014/12/05 面试题
如何写好自荐信
2014/04/07 职场文书
刊首寄语大全
2014/04/11 职场文书
2014年最新学校运动会广播稿
2014/09/17 职场文书
追悼词范文大全
2015/06/23 职场文书
建议书的格式及范文
2015/09/14 职场文书
pytorch 中nn.Dropout的使用说明
2021/05/20 Python
Golang 实现 WebSockets 之创建 WebSockets
2022/04/24 Golang