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

$(selector). draggable({options})

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

<!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>

        <title>拖曳插件</title>

        <link href="style.css" rel="stylesheet" type="text/css" />

        <script src="http://www.imooc.com/data/jquery-1.8.2.min.js" type="text/javascript"></script>

        <script src="http://www.imooc.com/data/jquery-ui-1.9.2.min.js" type="text/javascript"></script>

    </head>

    <body>

        <div id="divtest">

            <div id="x" class="drag">沿x轴拖拽</div>

            <div id="y" class="drag">沿y轴拖拽</div>

        </div>

        <script type="text/javascript">

            $(function () {

                $("#x").draggable({containment:"parent",axis: "x"})

                $("#y").draggable({containment:"parent",axis:"y"})

            });

        </script>

    </body>

</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. centos ab命令安装

    yum install apr-util -ymkdir abcd abyum -y install yum-utils -yyumdownloader httpd yum localinstall ...

  2. php常用数组函数小结

    count函数 作用:计算数组中元素的个数或对象的属性个数 返回值: 数组或者对象, 返回数组的单元个数或者对象的属性个数 Null,返回0 非数组,也非NULL,通通返回1 <?php $ar ...

  3. 【ESRI论坛6周年征文】ArcEngine注记（Anno/ Label/Element等）处理专题 -入门篇

    原发表于ESRI中国社区,转过来.我的社区帐号:jhlong http://bbs.esrichina-bj.cn/ESRI/viewthread.php?tid=122097 ----------- ...

  4. 【11-23】mysql学习笔记02

    SQL的历史 SQL是Structed Query Language 的缩写,即”结构化查询语言” SQL原名是 sequel,后来由于法律原因,改名 SQL最早可以追溯到 1974 年,源于 IBM ...

  5. tyvj1203 机器分配

    描述 总公司拥有高效生产设备M台,准备分给下属的N个公司.各分公司若获得这些设备,可以为国家提供一定的盈利.问:如何分配这M台设备才能使国家得到的盈利最大?求出最大盈利值.其中M<=100,N& ...

  6. Coursera-Getting and Cleaning Data-Week2-课程笔记

    Coursera-Getting and Cleaning Data-Week2 Saturday, January 17, 2015 课程概述 week2主要是介绍从各个来源读取数据.包括MySql ...

  7. 学习 opencv---(1) opencv3.1.0 组件结构浅析

    本系列是根据 浅墨大神 的opencv系列而写的,,应该大部分内容会一样..如有侵权还请告知........... 开发环境:win7 + VS2013 + opencv3.1.0 至于OpenCV组 ...

  8. TypeError: datetime.datetime(2016, 9, 25, 21, 12, 19, 135649) is not JSON serializable解决办法

    1.一个简单的方法来修补json模块,这样序列将支持日期时间. import json import datetime json.JSONEncoder.default = lambda self, ...

  9. python之路九

    paramiko paramiko模块是用python语言写的一个模块,遵循SSH2协议,支持以加密和认证的方式,进行远程服务器的连接 ssh执行命令: import paramikossh = pa ...

  10. JdbcTemplate中queryForObject的EmptyResultDataAccessException问题

    在使用Spring提供的JdbcTemplate中名为queryForObject API进行数据库查询时有时会抛出如下异常提示息,org.springframework.dao.EmptyResul ...