一、效果展示
普通的三个div
鼠标拖动选中效果
选中所有的div
这样貌似看不出效果,没关系,我们有神奇的gif动画,来一个整体的动画效果感受下。
二、代码实现
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 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持。