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

时间 2019-11-13

标签 javascript 基于 jquery 实现选中区域效果栏目 JavaScript 繁體版

原文原文链接

这篇文章主要介绍了Javascript基于jQuery UI实现选中区域拖拽效果的相关资料,很是不错，具备参考借鉴价值，须要的朋友能够参考下css

1、效果展现jquery

普通的三个divgit

鼠标拖动选中效果github

选中全部的div动画

这样貌似看不出效果，不要紧，咱们有神奇的gif动画，来一个总体的动画效果感觉下。ui

2、代码实现this

整个代码其实也不难，须要用到一个博主本身封装的js文件。spa

AreaSelect.jscode

考虑到代码量有点大，而且知乎没有代码折叠功能，因此这里就留一个文件名。等博主抽时间将它开源到github上面去，固然，有须要的朋友也能够直接联系博主，博主免费提供！ip

引入这个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();

});