基于jquery的一行代码轻松实现拖动效果_jquery

实现拖动效果.

复制代码 代码如下:

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

Html 代码

复制代码 代码如下:

<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");
}
);

一个setHandler搞定,不错开源是个好东西,Jquery更是好东西,插件扩展机制不是一般的好。
Drag.rar打包

时间: 2024-08-20 11:01:23

基于jquery的一行代码轻松实现拖动效果_jquery的相关文章

基于jQuery倒计时插件实现团购秒杀效果_jquery

倒计时一般是用来表示未来某一时刻距现在时刻还剩多少时间.倒计时在WEB上应用非常广泛,如考试系统倒计时,团购网站中的优惠活动倒计时等等.今天,我们来使用jQuery倒计时超级实现团购秒杀效果,感兴趣的朋友一起学习吧! 1.1 帮助文档关键字 倒计时 秒杀 timer 1.2. 使用场景 这样的倒计时在购物网站中会经常使用到,比如秒杀,限时抢购,确认收货倒计时. 这个功能并不难实现,就是利用js的定时执行,搜了一下网上的代码,五花八门,都是一个方法,没有做到封装,方便使用,所以写了一个插件,方便项

基于jQuery实现仿百度首页选项卡切换效果_jquery

以下代码比较简单,所以没给大家附太多的注释,有问题欢迎给我留言,具体详情请看下文代码吧. 先给大家展示下效果图: 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery仿百度首页选项卡切换效果 - 何问起</title&

基于jquery实现漂亮的动态信息提示效果_jquery

简单,漂亮,动画效果,用户体验好! 这个效果是在页面头部出现的,出现一下会自动隐藏,上面有x那个提示就要手动关闭一下,其他的都是自动隐藏的! 温馨提示:基于jquery 1.6.2 版本! 复制代码 代码如下: <div id="message-dock"> <div id="message-sleeve" class="group"> <p><span class="sprite messag

基于jquery实现最简单的选项卡切换效果_jquery

这个功能在现在的网站中使用较为普遍,就是以选项卡的形式来对一些内容做了分类.,比如下面的天猫商城. 下面的源码是仿照天猫写的一个选项卡,实现起来的效果如下. 主要是利用我们在点击相应板块是触发它的单击事件,在单击事件中再对内容显示框(tabbox)进行相应项的显示和隐藏操作. 同时利用hover为其添加了鼠标滑过时的效果. 代码: <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xh

基于jquery的模态div层弹出效果_jquery

经过几多周折,终于搞出来了,效果图如下: 具体实现: (1) 编写 jquery.divbox.js 的代码: 复制代码 代码如下: jQuery.fn.extend( { OpenDiv: function() { var sWidth, sHeight; sWidth = window.screen.availWidth; if (window.screen.availHeight > document.body.scrollHeight) { sHeight = window.screen

基于jQuery+JSON的省市二三级联动效果_jquery

省市区联动下拉效果在WEB中应用非常广泛,尤其在一些会员信息系统.电商网站最为常见.开发者一般使用Ajax实现无刷新下拉联动.本文将讲述,利用jQuery插件,通过读取JSON数据,实现无刷新动态下拉省市二(三)级联动效果. HTML 首先在head中载入jquery库和cityselect插件. <script type="text/javascript" src="js/jquery.js"></script> <script ty

基于jquery的滚动鼠标放大缩小图片效果_jquery

今天要出个鼠标滚动放大缩小图片的功能,看似很简单,从网上一搜,出现的都是onmousewheel的例子,全部只支持IE浏览器,结果查出火狐有对应的DOMMouseScroll来处理这个功能,代码如下,并加上注意的注释项: 复制代码 代码如下: $(function(){ $(".body img").each(function(){ if($.browser.msie){ $(this).bind("mousewheel",function(e){ var e=e|

JavaScript 一行代码,轻松搞定浮动快捷留言-V2升级版_javascript技巧

前天熬了大半宿发了一篇[一行代码轻松搞定快捷留言功能],同时发布了V1.0beta版的快捷留言功能和源代码,之所以是beta版,就是当时感觉虽然基本功能有了,但是还不够完善,特性也不一定合理,今天不知不觉又弄到了这个时候,这次对上一版做了很大改进: 首先,原来自动提交留言信息的同时会自动推荐,大量的推荐数,直接影响了博客园的推荐排名机制,所以后来在第一时间修改成了询问是否要推荐的交互模式! 其次,虽然快捷功能有了,并且很好用,但是满屏幕的"好贴!我顶你!"也确实有些审美疲劳了,并且没什

jQuery实现的跨容器无缝拖动效果代码_jquery

本文实例讲述了jQuery实现的跨容器无缝拖动效果.分享给大家供大家参考,具体如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta h