拖曳插件draggable的功能是拖动被绑定的元素，当这个jQuery UI插件与元素绑定后，可以通过调用draggable()方法，实现各种拖曳元素的效果，调用格式如下：

$(selector). draggable({options})

options参数为方法调用时的配置对象，根据该对象可以设置各种拖曳效果，如“containment”属性指定拖曳区域，“axis”属性设置拖曳时的坐标方向。

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3.     <head>
  4.         <title>拖曳插件</title>
  5.         <link href="style.css" rel="stylesheet" type="text/css" />
  6.         <script src="http://www.imooc.com/data/jquery-1.8.2.min.js" type="text/javascript"></script>
  7.         <script src="http://www.imooc.com/data/jquery-ui-1.9.2.min.js" type="text/javascript"></script>
  8.     </head>
  9.  
  10.     <body>
  11.         <div id="divtest">
  12.             <div id="x" class="drag">沿x轴拖拽</div>
  13.             <div id="y" class="drag">沿y轴拖拽</div>
  14.         </div>
  15.  
  16.         <script type="text/javascript">
  17.             $(function () {
  18.                 $("#x").draggable({containment:"parent",axis: "x"})
  19.                 $("#y").draggable({containment:"parent",axis:"y"})
  20.             });
  21.         </script>
  22.     </body>
  23. </html>

jQuery插件（拖拽）的更多相关文章

  1. jQuery可拖拽3D万花筒旋转特效

    这是一个使用了CSS3立体效果的强大特效,本特效使用jQuery跟CSS3 transform来实现在用户鼠标按下拖动时,环形图片墙可以跟随鼠标进行3D旋转动画. 效果体验:http://hovert ...

  2. jQuery可拖拽排序列表jquery-sortable-lists

    jquery-sortable-lists可以通过鼠标进行拖动排列树型菜单,可以定义某个列表元素是否拖动,拖动后回调,点击可以折叠树型结点,可以用来在后台模仿wordpress后台拖动菜单,实现多级菜 ...

  3. HTML5 CSS3 经典案例：无插件拖拽上传图片 （支持预览与批量） （二）

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/31513065 上一篇已经实现了这个项目的整体的HTML和CSS: HTML5 C ...

  4. JQuery之拖拽插件

    一直以来,都对JS获取元素的位置感到非常的困惑:一会client.一会offset.一会scroll. 再加上各大浏览器之间的不兼容,唉,搞得哥晕晕乎乎的. 而很多页面效果都要用到这些位置.不得已,得 ...

  5. jquery实现拖拽以及jquery监听事件的写法

    很久之前写了一个jquery3D楼盘在线选择,这么一个插件,插件很简单,因为后期项目中没有实际用到,因此,有些地方不是很完善,后面也懒得再进行修改维护了.最近放到github上面,但是也少有人问津及s ...

  6. jquery sortTable拖拽排序

    所有的事件回调函数都有两个参数:event和ui,浏览器自有event对象,和经过封装的ui对象   ui.helper - 表示sortable元素的JQuery对象,通常是当前元素的克隆对象   ...

  7. jQuery 鼠标拖拽排序

    <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...

  8. SpringMvc+jQuery 文件拖拽上传、选择上传

    最近做了个简易的基于boostrap的文件上传功能,jsp版本的,后续会完善更多的功能,不过现在已经能用了,需要的小伙伴,直接引用下面的文件内容直接copy到自己的项目中就ok了,效果如图: file ...

  9. 面向对象+jquery实现拖拽功能

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  10. jquery 可拖拽的窗体控件实现代码

    引入JQUERY框架.把这个控件代码放到一个js文件里面直接引入就可以了控件代码 $.fn.myDrag = function() { var self = $(this); self.css(&qu ...

随机推荐

  1. Linux下查看软件的安装路径

    一．which 命令 Shell 的which 命令可以找出相关命令是否已经在搜索路径中. $ which git/usr/bin/git 二．whereis 命令 whereis 命令搜索更大范围的 ...

  2. ruby

    :for 是关键字, each是方法. for 后面的变量,是全局变量,不仅仅存在于for .. end 这个作用域之内 module中的 self.xx方法可以被直接调用 module中的普通方法, ...

  3. MVC是一个经典的设计模式

    MVC的架构:具体是模型(Model).视图(View)和控制器(Controller). MVC模式的目的是实现一种动态的程式设计,使后续对程序的修改和扩展简化,并且使程序某一部分的重复利用成为可能 ...

  4. c# 网络

    http://www.cnblogs.com/fuchongjundream/p/4079128.html http://stackoverflow.com/questions/21728773/th ...

  5. Node.js Stream-基础篇

    Node.js Stream - 基础篇 邹斌 ·2016-07-08 11:51 背景 在构建较复杂的系统时,通常将其拆解为功能独立的若干部分.这些部分的接口遵循一定的规范,通过某种方式相连,以共同 ...

  6. tyvj1113 魔族密码

    描述     风之子刚走进他的考场,就……    花花:当当当当~~偶是魅力女皇——花花!!^^(华丽出场,礼炮,鲜花)    风之子:我呕……(杀死人的眼神)快说题目!否则……-_-###    花 ...

  7. mysql登录报错“Access denied for user 'root'@'localhost' (using password: YES”的处理方法

    使用/etc/mysql/debian.cnf文件中[client]节提供的用户名和密码: 文件内容: [client]host = localhostuser = debian-sys-maint ...

  8. javascript的document中的动态添加标签

    document的高级篇中提供了节点操作的函数,具体包括:获取节点,改变节点,删除节点,替换节点,创建节点,添加节点,克隆节点等函数.我们可以利用这些函数动态改变html的节点. 1.JavaScri ...

  9. Github上的PHP资源汇总大全

    依赖管理 ——用于依赖管理的包和框架 Composer/Packagist : 一个包和依赖管理器 Composer Installers:  一个多框架Composer库安装器 Pickle: 可以 ...

  10. python function parameter

    Python 2.7.10 (default, Oct 14 2015, 16:09:02) [GCC 5.2.1 20151010] on linux2 Type "copyright&q ...