首页 > jQuery > jQuery UI 学习(四) — Draggable的使用

jQuery UI 学习(四) — Draggable的使用

2009年02月25日 留下评论 Go to comments

一、概述

通过前面几节学习，大家应该都知道了，一个div对象是可以通过拖拉来改变大小，也可以通过拖动来改变其位置的。如何改变大小已经讲解过了，那么怎么实现拖动改变位置呢？现在就开始讲解如何实现拖动 — Draggable。

二、实现三步曲

1、添加css样式文件和js源文件 

   1: <link rel="stylesheet" href="js/themes/flora/flora.all.css"
   2:     type="text/css" media="screen" title="Flora (Default)" />
   3: <style>
   4: .block {
   5:     border: 2px solid #0090DF;
   6:     background-color: #68BFEF;
   7:     width: 150px;
   8:     height: 70px;
   9:     margin: 10px;
  10: }
  11: #contain {
  12:     border: 2px solid #0090DF;
  13:     background-color: red;
  14:     width: 500px;
  15:     height: 140px;
  16:     margin: 10px;
  17: }
  18: </style>
  19: <script type="text/javascript" src="js/jquery.js"></script>
  20: <script type="text/javascript" src="js/ui/ui.core.js"></script>
  21: <script type="text/javascript" src="js/ui/ui.resizable.js"></script>
  22: <script type="text/javascript" src="js/ui/ui.draggable.js"></script>

2、定义一个<div></div> 

   1: <div id="contain"></div>

3、编写js代码，调用draggable() 

   1: $("#contain").draggable();

三、详解 

   1: <script type="text/javascript">
   2: $(document).ready(function(){
   3:     $(".block").draggable({
   4:         //helper: "clone",         //拖动时克隆,默认是 original
   5:         //axis:"x",                //定义拖动方向
   6:         containment:"#contain",    //定义一个容器,div就只能在容器的范围内活动了
   7:         cursor: "move",            //定义拖动时鼠标指针的状态 ，参数类型详见css中cursor配置
   8:         cursorAt:{top:10},         //定义拖动的时候鼠标指针的位置,此位置是相对被拖动对象的边框，单位px
   9:         opacity: 0.40,             //设置对象被拖动时的透明度
  10:         handle: "div",             //设置拖动控制器，也就是说当鼠标按住控制器的时候，才能拖动对象
  11:         scroll:false,              //设置当拖动超出整个浏览器窗口,是否滚动浏览器
  12:         distance: 20,              //设置当鼠标拖动多少像素时对象才会移动
  13:         //delay: 1000,             //设置延迟时间 单位毫秒
  14:         grid:[50,50],              //设置每次拖动的步进 单位px
  15:         dragPrevention:['input', 'textarea', 'button', 'select', 'option'],//设置被拖动的div碰到那些dom元素时停止
  16:         start:function(e,ui){},    //开始拖动执行的函数
  17:         drag:function(e,ui){},     //拖动时执行的函数
  18:         stop:function(e,ui){}      //拖动停止执行的函数
  19:     }).resizable();
  20:  
  21:     $("#contain").draggable({
  22:             revert: true,          //设置对象被拖动释放后时候回到原始位置 
  23:             helper: "clone"
  24:     });
  25: });
  26:  </script>
  27:  
  28: <title>jQuery UI -- Draggable</title>
  29: </head>
  30: <body>
  31: <div id="contain">
  32: <div class="block">
  33: <div class="hendle" style="background: green">handle</div>
  34: </div>
  35: </div>

四、应用场景

当你要拖动一个对象的时候，都可以拖动。常见的有布局改变需要拖动，像很多博客进入编辑状态，那些模块都是可以拖动，这就是应用之一。

本节示例代码：http://cid-ada1fb08e190ebf4.skydrive.live.com/embedgrid.aspx/jQueryUI/UI|_Draggable.zip

分类：jQuery
  1. 还没有评论。
  1. No trackbacks yet.

留下评论