当前位置：首页 > 资讯 > 技术文档

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

时间：2021-06-30 16:59 编辑：来源：阅读：
扫一扫，手机访问

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

[b]一、效果展示[/b] 普通的三个div [img]http://files.jb51.net/file_images/article/201611/20161125140044657.png?2016102514055[/img] 鼠标拖动选中效果 [img]http://files.jb51.net/file_images/article/201611/20161125140135203.png?2016102514156[/img] 选中所有的div [img]http://files.jb51.net/file_images/article/201611/20161125140226547.png?2016102514241[/img] 这样貌似看不出效果，没关系，我们有神奇的gif动画，来一个整体的动画效果感受下。 [img]http://files.jb51.net/file_images/article/201611/20161125140321599.png?2016102514343[/img] [b]二、代码实现[/b] 整个代码其实也不难，需要用到一个博主自己封装的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实现选中区域拖拽效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对编程素材网网站的支持！

全部评论(0)

上一篇：JavaScript自定义浏览器滚动条兼容IE、火狐和chrome
下一篇：在js中做数字字符串补0(js补零)

资讯排行榜
更多>>