Jquery一行代码轻松实现拖动效果

2016-02-19 13:57 4 1 收藏

下面图老师小编跟大家分享一个简单易学的Jquery一行代码轻松实现拖动效果教程,get新技能是需要行动的,喜欢的朋友赶紧收藏起来学习下吧!

【 tulaoshi.com - Web开发 】

    写JS实现拖动需要一大堆不便维护的代码,实属麻烦,Google了大半天,发现了一个优秀的Jquery插件EasyDrag,只需要一行代码便可轻松在主流浏览器上

实现拖动效果.

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

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

Html 代码

Code
  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更是好东西,插件扩展机制不是一般的好。

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

http://www.jzxue.com/Systemhttp://img.warting.com/soft/web/1_090513233951.rar

来源:http://www.tulaoshi.com/n/20160219/1605794.html

延伸阅读
标签: Web开发
一些css的定义,可以根据需要自己选择。 //显示单双行显示不同背景色: // $("#UL_id li:even").attr("className","redClass"); //显示单双行显示不同背景色: $("#UL_id li:even").addClass("redClass"); ul id="UL_id" li单数/li li双数/li li双数/li /ul odd:单 even:双 jQuery 表格隔行变色代码 li隔行换色改进版 JS控制表格隔...
标签: 电脑入门
如何批量修改wps表格/excel数据中,实现对一列(行)的加、减、乘、除?? 比如我们做好一个L表格,填好了数据,现在想修改其中的一列(行),例如:想在A列原来的数据的基础上加8,有没有这样的?是不是非得手工的一个一个数据地住上加?对于这个问题我们自然想到了利用,当你利用工式输入A1=A1+8时,你会得到EXCEL的一个警告:WPS表格不能计算该公式...
标签: 办公软件
看了《中国电脑教育报》今年第18期F6版的《用“替换”实现数据的转移》一文,笔者依照文中的方法尝试了一下,确实能够解决一定的问题。不过笔者今天介绍一种更简单灵活的方法,供广大老师参考。 文章中是将一个有A、B两列,60行的表格转换为6列20行的表格,我们还以解决此问题为例进行说明。 先拿出秘密武器,到http://www.excelhom...
标签: Web开发
代码如下: !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" html xmlns="http://www.w3.org/1999/xhtml" head titlejquery分页控件/title script src="jquery-1.3.min.js" type="text/javascript"/script /head body div class="pager"/div !--div s...
家庭信息表: ID  学生姓名   成员姓名 1    张三           成员1 2    张三           成员2 3    李四           ...

经验教程

735

收藏

31
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部