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

前端之家收集整理的这篇文章主要介绍了Javascript基于jQuery UI实现选中区域拖拽效果前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

一、效果展示

普通的三个div

鼠标拖动选中效果

选中所有的div

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

二、代码实现

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

AreaSelect.js

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

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

因为文件之后,然后剩下的就是html和js初始化了

$(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实现选中区域拖拽效果。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

原文链接:https://www.f2er.com/jquery/44166.html

猜你在找的jQuery相关文章