蚂蚁论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,访问微社区

查看: 40|回复: 0

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

[复制链接]

1979

主题

1

好友

1609

积分

管理员

Rank: 64Rank: 64Rank: 64Rank: 64

  • TA的每日心情
    奋斗
    2016-1-22 16:23
  • 签到天数: 4 天

    [LV.2]偶尔看看I

    荣誉管理 论坛元老 热心会员 活跃会员 最佳新人 灌水之王

    发表于 2017-10-12 14:47:06 |显示全部楼层
    Javascript基于jQuery UI实现选中区域拖拽效果
    一、效果展示
    普通的三个div

    鼠标拖动选中效果

    选中所有的div

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

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

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


    lt;script src="Scripts/jquery-1102js"gt;lt;/scriptgt;
    lt;script src="Content/jquery-ui-1114custom/jquery-uijs"gt;lt;/scriptgt;
    lt;link href="Content/jquery-ui-1114custom/jquery-uimincss" rel="stylesheet" /gt;
    lt;script src="Scripts/**mon/SelectAreajs"gt;lt;/scriptgt;



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


    lt;bodygt;
    lt;div id="divCenter"gt;
    lt;div id="div1" style="position:absolute;width:200px;height:150px;left:200px;top:50px;cursor:pointer;"gt;div2lt;/divgt;
    lt;div id="div2" style="position:absolute;width:200px;height:150px;left:450px;top:200px;cursor:pointer;"gt;div2lt;/divgt;
    lt;div id="div3" style="position:absolute;width:200px;height:150px;left:700px;top:390px;cursor:pointer;"gt;div3lt;/divgt;
    lt;/divgt;
    lt;/bodygt;
    $(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"
    });
    oRegionSelectselect();
    });

    以上所述是小编给大家介绍的Javascript基于jQuery UI实现选中区域拖拽效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。
    您需要登录后才可以回帖 登录 | 立即注册

    关闭

    蚂蚁站长论坛推荐上一条 /1 下一条

    QQ|Archiver|手机版|广告服务|蚂蚁站长-站长之家 ( 黔ICP备16008478号-1  

    GMT+8, 2017-10-23 06:50

    Powered by 站长论坛

    © 2007-2013 Jzant.com Inc.

    回顶部