拖曳插件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. gif工具 - ScreenToGif

    之前我介绍过LiceCap这款制作gif的软件,但是那个软件的获取方式较为麻烦,并且有时候可能在不同的设备上会表现效果有所不同,这里将要介绍的软件我认为还是非常不错的,我们可以在ScreenToGif ...

  2. webpackJsonp is not defined？

    用了CommonsChunkPlugin生成了公共文件,但是页面还没有引用这个公共文件 比如下面这个配置 var webpack = require('webpack'); var path = re ...

  3. epoll ET模式陷阱分析

    0. 前言 这篇文章主要记录在使用epoll实现NIO接入时所遇到的问题. 1. epoll简介 epoll是Linux下提供的NIO,其主要有两种模式,ET(Edge trige)和LT(Level ...

  4. linux /proc/meminfo 文件分析（转载）

    cat /proc/meminfo    读出的内核信息进行解释,下篇文章会简单对读出该信息的代码进行简单的分析. # cat /proc/meminfo MemTotal:     kB MemFr ...

  5. 如何使用C自带的qsort快速排序

    / you can write to stdout for debugging purposes, e.g. // printf("this is a debug message\n&quo ...

  6. PHP realpath() 函数

    定义和用法 realpath() 函数返回绝对路径. 该函数删除所有符号连接(比如 '/./', '/../' 以及多余的 '/'),返回绝对路径名. 若失败,则返回 false.比如说文件不存在的话 ...

  7. Linux C fcntl()函数详解

    fcntl系统调用 功能描述:根据文件描述词来操作文件的特性. 用法: int fcntl(int fd, int cmd);  int fcntl(int fd, int cmd, long arg ...

  8. 【Alpha版本】冲刺阶段——Day 10

    我说的都队 031402304 陈燊 031402342 许玲玲 031402337 胡心颖 03140241 王婷婷 031402203 陈齐民 031402209 黄伟炜 031402233 郑扬 ...

  9. 【Alpha版本】 第一天 11.7

    一.站立式会议照片: 二.项目燃尽图: 三.项目进展: 成 员 前段时间完成任务 今天完成任务 明天要做任务 问题困难 心得体会 胡泽善 部分APP功能 我要招聘详情的展示 注册界面的实现 一些特殊效 ...

  10. php万年历

    最近学习php循环.日期显示.GET方式请求,进而实现了一个小程序. 直接上代码: <?php header("Content-type:text/html; charset=UTF- ...