这篇文章主要介绍了Javascript基于jQuery UI实现选中区域拖拽效果的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
一、效果展示
普通的三个div
鼠标拖动选中效果
选中所有的div
这样貌似看不出效果，没关系，我们有神奇的gif动画，来一个整体的动画效果感受下。
二、代码实现
整个代码其实也不难，需要用到一个博主自己封装的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>
|
| | <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();
});
|
