jquery Draggable学习笔记

首先接触到的是Draggable 插件可以使被选择的元素随着鼠标移动实现拖动

1、首先是默认情况下拖动

Drag me around

点我查看详细html代码
<div class="demo"> <div id="draggable" class="ui-widget-content"> <p>Drag me around</p> </div> </div>

点我查看详细jquery代码
很简单就一句，别忘记导入jquery UI和jquery包 $(function(){ $("#draggable").draggable();//默认情况拖动 }); })



2、X，Y方向以及容器内拖动

我只能在水平方向移动

我只能在垂直方向移动

我只能在容器里拖动

点我查看详细html代码
<div id="draggable_x" class="draggable ui-widget-content"> <p>我只能在水平方向移动</p> </div> <div id="draggable_y" class="draggable ui-widget-content"> <p>我只能在垂直方向移动</p> </div> <div id="containment-wrapper"> <div id="draggable3" class="draggable ui-widget-content"> <p>我只能在容器里拖动</p> </div> </div>

点我查看详细jquery代码
$(function(){ $("#draggable_y").draggable({ axis: 'y' });//Y方向拖动 $("#draggable_x").draggable({ axis: 'x' });//X方向拖动 $("#draggable3").draggable({ containment: '#containment-wrapper', scroll: false });//容器拖动 })



3、拖动或恢复到原位置

拖动我恢复到原位置

对比下我们的效果









点我查看详细html代码
<div id="draggable_Revert" class="ui-widget-content"> <p>拖动我恢复到原位置</p> </div> <div id="draggable_Revert1" class="ui-widget-content"> <p>对比下我们的效果</p> </div>

点我查看详细jquery代码
$(function(){ $("#draggable_Revert").draggable({ revert: true });//拖动恢复到原位置 $("#draggable_Revert1").draggable({ revert: true, helper: 'clone' });//拖动恢复到原位置 })

4、鼠标放到指定区域拖动

点我可以拖
拖不了

点我可以拖

拖
不了









点我查看详细html代码
<div class="demo"> <div id="draggable_handle" class="ui-widget-content"> <p class="ui-widget-header" >点我可以拖</p> 拖不了 </div> <div id="draggable_handle1" class="ui-widget-content"> <p>点我可以拖</p> <p class="ui-widget-header" >拖<br>不了<br></p> </div> </div>

点我查看详细jquery代码
$(function(){ $("#draggable_handle").draggable({ handle: 'p' }); $("#draggable_handle1").draggable({ cancel: "p.ui-widget-header" });//指定区域拖动 })

draggable常用的几种效果就这样, 呵呵~~是不是很简单^-^

参数说明

    *
      axis

      类型:
          String
      默认值:
          false

      设置拖动是水平方向还是垂直方向,也可以是水平与垂直方向. 允许使用的值: 'x', 'y'.
      代码示例

      使用指定的axis参数初始化一个draggable.

          $('.selector').draggable({ axis: 'x' });

      在初始化后设置或者获取axis参数.

          //获取  var axis = $('.selector').draggable('option', 'axis');  //设置  $('.selector').draggable('option', 'axis', 'x');

    *
      cancel

      类型:
          Selector
      默认值:
          ':input,option'

      禁止在指定的元素上进行拖动
      代码示例

      使用指定的cancel参数初始化一个draggable.

          $('.selector').draggable({ cancel: 'button' });

      在初始化后设置或者获取cancel参数.

          //获取  var cancel = $('.selector').draggable('option', 'cancel');  //设置  $('.selector').draggable('option', 'cancel', 'button');

cursor

类型:
    String
默认值:
    'auto'

设置拖动时的鼠标指针样式.
代码示例

使用指定的cursor参数初始化一个draggable.

    $('.selector').draggable({ cursor: 'crosshair' });

在初始化后设置或者获取cursor参数.

    //获取  var cursor = $('.selector').draggable('option', 'cursor');  //设置  $('.selector').draggable('option', 'cursor', 'crosshair');

    *
      grid

      类型:
          Array
      默认值:
          false

      设置辅助在目标容器中的x和y边距(单位:像素). 数组值: [x, y]
      代码示例

      使用指定的grid参数初始化一个draggable.

          $('.selector').draggable({ grid: [50, 20] });

      在初始化后设置或者获取grid参数.

          //获取  var grid = $('.selector').draggable('option', 'grid');  //设置  $('.selector').draggable('option', 'grid', [50, 20]);

    *
      handle

      类型:
          Element, Selector
      默认值:
          false

      如果设定了此参数,那么拖动会在指定的元素上开始.
      代码示例

      使用指定的handle参数初始化一个draggable.

          $('.selector').draggable({ handle: 'h2' });

      在初始化后设置或者获取handle参数.

          //获取  var handle = $('.selector').draggable('option', 'handle');  //设置  $('.selector').draggable('option', 'handle', 'h2');

    *
      helper

      类型:
          String, Function
      默认值:
          'original'

      允许使用一个辅助元素来进行拖动时展示. 允许使用的值: 'original', 'clone', Function. 如果指定一个函数,它必须返回一个 DOMElement.
      代码示例

      使用指定的helper参数初始化一个draggable.

          $('.selector').draggable({ helper: 'clone' });

      在初始化后设置或者获取helper参数.

          //获取  var helper = $('.selector').draggable('option', 'helper');  //设置  $('.selector').draggable('option', 'helper', 'clone');

事件说明

    *
      start

      类型:
          dragstart

      在拖动开始时触发此事件.
      代码示例

      提供一个回调函数来处理start事件作为初始化选项.

          $('.selector').draggable({     start: function(event, ui) { ... }  });

      使用dragstart类型来绑定start事件.

          $('.selector').bind('dragstart', function(event, ui) {    ...  });

    *
      drag

      类型:
          drag

      在拖动进行时触发此事件.
      代码示例

      提供一个回调函数来处理drag事件作为初始化选项.

          $('.selector').draggable({     drag: function(event, ui) { ... }  });

      使用drag类型来绑定drag事件.

          $('.selector').bind('drag', function(event, ui) {    ...  });

    *
      stop

      类型:
          dragstop

      当拖动停止时触发此事件.
      代码示例

      提供一个回调函数来处理 stop 事件作为初始化选项.

          $('.selector').draggable({     stop: function(event, ui) { ... }  });

      使用dragstop类型来绑定stop事件.

          $('.selector').bind('dragstop', function(event, ui) {    ...  });

      方法说明
    *
      destroy

      方法签名:
          .draggable( 'destroy' )

      完全移除拖动功能. 这将使元素返回到之前的初始化状态.
    *
      disable

      方法签名:
          .draggable( 'disable' )

      关闭拖动.
    *
      enable

      方法签名:
          .draggable( 'enable' )

      打开拖动.
    *
      option

      方法签名:
          .draggable( 'option' , optionName , [value] )

      获取或者设置拖动参数. 如果没有提供参数值则是获取.