一、效果展示

普通三分

拖动鼠标选择效果

选择所有div

似乎没有效果。没关系。我们有神奇的gif动画。让我们感受一下整个动画效果。

二、代码实现

其实整个代码并不难，需要一个博主封装的js文件。

区域选择. js

考虑到代码量有点大，而且知乎没有代码折叠功能，所以这里留个文件名。等博主找时间打开给github。当然有需要的朋友也可以直接联系博主，博主会免费提供！

在介绍完这个js之后，还需要参考jquery和jquery UI的相关文件。

script src=' http : script/jquery-1 . 10 . 2 . js '/script script src=' http : 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='样式表'/script src=' http : script/common/selectarea . js '/script因为在文件之后，剩下的都是html和js初始化的

body div id=' DivCenter ' div id=' div 1 ' style=' position : absolute；宽度width:200px高度：150 px；left:200pxtop:50pxcursor:pointer指针；div 2/div div id=' div 2 ' style=' position : absolute；宽度width:200px高度：150 px；left:450pxtop:200pxcursor:pointer指针；div 2/div div id=' div 3 ' style=' position : absolute；宽度width:200px高度：150 px；left:700pxtop:390pxcursor:pointer指针；div 3/div/div/body $(function(){ $(' # DivCenter div ')。可拖动({scope: 'plant '，start : function(){ startMove()；}，drag:函数(事件，ui) {MoveSelectDiv(事件，ui，$(this)。attr(' id ')；},});oregionselection=new region select({ region : ' # div center div '，selectedClass: 'seled '，parentid : ' div center ' })；oregionselect . select()；});以上是边肖介绍的基于jQuery UI实现选中区域拖拽效果的Javascript。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！