jQuery插件EasyDrag轻松实现JS拖动的效果

<div id="divPanel" style="width:300px;height:300px;background:white;border:1px solid #000000;position:absolute;left:5px;top:50px" >
        <div id="divTitle" style="width:100%;height:25px;background:lavender">
            Title
        </div>
        <div style="width:100%">
        </div>
    </div>

EasyDrag可以指定可拖动的区域,比如只能通过标题拖动整个div,我们JS可以这样写

$(document).ready ( function()
            {
                $("#divPanel").easydrag();          
                $("#divPanel").setHandler("divTitle");
            }
        );

 

<div id=”box1><div id=”darghandle“></div>Darg me…</div>
$(”#box1″).easydrag(false,["darghandle"]);

 

转载于:https://www.cnblogs.com/lifeifei/archive/2012/06/25/2560740.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
用法: $(“#box”).easydrag();//给指定的标签绑定拖动效果,也可以是Class $(“#box”).setHandler(‘handler’);//指定触发拖动的元素,download best apps for iphone 5handler是该元素的idhttp://www.newipadipa.com/ ,后面我们需要修改它 首先这个件真的很好用(废话),短短2行代码就能让页面中的div动起来。但是如果要拖动很多div的时候 ,我们还是要稍微做出修改才能正常使用。 首先我的弹窗div在弹出的时候是默认在页面正中的,但是要使用这个件被拖动的div就要使 用”position:absolute”的属性定位,这让我们的居中非常困难。解决思路:在触发弹窗之前用js获取当前屏 幕的分辨率然后将div居中。 js代码: { var div_width=Number(jQuery(‘#box’).css(‘width’)); var sc_width=(Number(window.screen.width)/2-(div_width/2)); //div距离浏览器左边框的距离为屏幕宽 度的一半-div宽度的一半 jQuery(‘#box).css(‘left’,sc_width); } 好了,初始化之后就是拖动了,如果需要拖动的div不多的话这样就可以了。但是我写的页面要拖动的div较多 ,而且这个件只能用id号给元素绑定触发拖动的属性,如果一个id一个id的绑定事件的话会造成代码冗余 。所以我们要修改一下源文件jquery.easydrag.handler.beta2.js:找到 function(handlerId) 这个函数, 将里面的$(“#”+handlerId)都改成$(“.”+handlerId)就可以了。好吧,这样就可以了,下面是实例,高手们请 无视好了。。。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值