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

2019独角兽企业重金招聘Python工程师标准>>>

这篇文章主要介绍了Javascript基于jQuery UI实现选中区域拖拽效果的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下

一、效果展示

普通的三个div

鼠标拖动选中效果

选中所有的div

这样貌似看不出效果，没关系，我们有神奇的gif动画，来一个整体的动画效果感受下。

二、代码实现

整个代码其实也不难，需要用到一个博主自己封装的js文件。

AreaSelect.js

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

引入这个js后，还需要引用jquery和jquery UI相关文件。

"Content/jquery-ui-1.11.4.custom/jquery-ui.min.css" rel="stylesheet" />

"divCenter"> "div1" style="position:absolute;width:200px;height:150px;left:200px;top:50px;cursor:pointer;">div2 "div2" style="position:absolute;width:200px;height:150px;left:450px;top:200px;cursor:pointer;">div2 "div3" style="position:absolute;width:200px;height:150px;left:700px;top:390px;cursor:pointer;">div3 $(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(); });

转载于:https://my.oschina.net/u/3063271/blog/794653