jQuery-Draggable参数介绍

   

默认设置值:

$.extend($.ui.draggable, {

version: “1.7.1″,

eventPrefix: “drag”,

defaults: {

addClasses: true,

appendTo: “parent”,

axis: false,

cancel: “:input,option”,

connectToSortable: false,

containment: false,

cursor: “auto”,

cursorAt: false,

delay: 0,

distance: 1,

grid: false,

handle: false,

helper: “original”,

iframeFix: false,

opacity: false,

refreshPositions: false,

revert: false,

revertDuration: 500,

scope: “default”,

scroll: true,

scrollSensitivity: 20,

scrollSpeed: 20,

snap: false,

snapMode: “both”,

snapTolerance: 20,

stack: false,

zIndex: false

}

});

============================================================

Default:

$(”#draggable”).draggable();

============================================================

events:

var $start_counter = $(’#event-start’), $drag_counter = $(’#event-drag’), $stop_counter = $(’#event-stop’);

var counts = [0,0,0];

$(”#draggable”).draggable({

start: function() {

counts[0]++;

updateCounterStatus($start_counter,counts[0]);

},

drag: function() {

counts[1]++;

updateCounterStatus($drag_counter,counts[1]);

},

stop: function() {

counts[2]++;

updateCounterStatus($stop_counter,counts[2]);

}

});

});

function updateCounterStatus($event_counter,new_count) {

// first update the status visually…

if (!$event_counter.hasClass(’ui-state-hover’)) {

$event_counter.addClass(’ui-state-hover’)

.siblings().removeClass(’ui-state-hover’);

}

// …then update the numbers

$(’span.count’,$event_counter).text(new_count);

============================================================

constrain-movement(限制范围移动):

$(”#draggable”).draggable({ axis: ‘y’ });  //限制y轴

$(”#draggable2″).draggable({ axis: ‘x’ }); //限制x轴

$(”#draggable3″).draggable({ containment: ‘#containment-wrapper’, scroll: false }); //不出现滚动条

$(”#draggable4″).draggable({ containment: ‘#demo-frame’ });

$(”#draggable5″).draggable({ containment: ‘parent’ }); //限制在父系框架中

============================================================

delay-start(延时移动):

$(”#draggable”).draggable({ distance: 20 }); //移动20像素开始拖动

$(”#draggable2″).draggable({ delay: 1000 });//延迟1秒后开始拖动

============================================================

snap-to (吸附移动):

$(”#draggable”).draggable({ snap: true }); //默认,任何方式吸附

$(”#draggable2″).draggable({ snap: ‘.ui-widget-header’ }); //以某元素的内外径吸附

$(”#draggable3″).draggable({ snap: ‘.ui-widget-header’, snapMode: ‘outer’ }); //以某元素外径吸附,吸附方式:本上吸其下,本下吸其上. 内径吸附:inner, 吸附方式:相反

$(”#draggable4″).draggable({ grid: [20,20] });//以一定距离移动

$(”#draggable5″).draggable({ grid: [80, 80] });

============================================================

scroll:

$(”#draggable”).draggable({ scroll: true });

$(”#draggable2″).draggable({ scroll: true, scrollSensitivity: 100 });  //滚动条敏感度

$(”#draggable3″).draggable({ scroll: true, scrollSpeed: 100 });  //滚动速度

============================================================

revert position(恢复到原始位置):

$(”#draggable”).draggable({ revert: true });     //revert:true 设置为恢复到位置

$(”#draggable2″).draggable({ revert: true, helper: ‘clone’ });              //helper:’clone’ 复制拖动

============================================================

visualfeedback (视觉效果):

$(”#draggable”).draggable({ helper: ‘original’ });  //设置不复制(初始化设置)

$(”#draggable2″).draggable({ opacity: 0.7, helper: ‘clone’ }); //opacity设置透明度,并克隆元素

$(”#draggable3″).draggable({

cursor: ‘move’, //设置鼠标图形

cursorAt: { top: -12, left: -20 }, //位置定位坐标设置

helper: function(event) {

return $(’<div class=”ui-widget-header”>I\’m a custom helper</div>’);

} //新建提示元素,上面设置其以鼠标定位位置值

});

$(”#set div”).draggable({ stack: { group: ‘#set div’, min: -1 } });//群组设置拖动,并且最后添加的元素叠加到该群组的最上面.适合做许愿板效果。

============================================================

Drag handle (拖动点设置):

$(”#draggable”).draggable({ handle: ‘p’ }); //handle设置实现拖动位置

$(”#draggable2″).draggable({ cancel: “p.ui-widget-header” }); //cancel设置限制拖动位置

============================================================

Cursor style (鼠标样式):

$(”#draggable”).draggable({ cursorAt: { cursor: ‘move’, top: 56, left: 56 } }); //cursor设置鼠标样式, top、left、right、bottom设置元素相对鼠标的定位点

$(”#draggable2″).draggable({ cursorAt: { cursor: ‘crosshair’, top: -5, left: -5 } });

$(”#draggable3″).draggable({ cursorAt: { bottom: 0 } });

===========================================================

Cursor style (鼠标样式):

$(”#draggable”).draggable({ cursorAt: { cursor: ‘move’, top: 56, left: 56 } }); //cursor设置鼠标样式, top、left、right、bottom设置元素相对鼠标的定位点

============================================================

Draggable+sortable:

$(”#sortable”).sortable({

revert: true

});

$(”#draggable”).draggable({

connectToSortable: ‘#sortable’, //设置拖动加入到其他列表中

helper: ‘clone’,

revert: ‘invalid’

});

转载:http://blog.sina.com.cn/s/blog_48474ade0100exfg.html

droppable的详细参数讲解的更多相关文章

  1. iptables详细参数讲解

    table 表 --> chain 链 --->rule 规则Commands:Either long or short options are allowed. --append -A ...

  2. android ui界面设计参数讲解

    百度文库: http://wenku.baidu.com/link?url=s66Hw6byBEzmjL77doYL1YQN4Y_39F7MovaHKs5mVGrzTDOQCAmiM-1N_6Cdm- ...

  3. Sqoop Import原理和详细流程讲解

    Sqoop Import原理 Sqoop Import详细流程讲解 Sqoop在import时,需要指定split-by参数.Sqoop根据不同的split-by参数值来进行切分,然后将切分出来的区域 ...

  4. 【转】android 最新 NDK r8 在window下开发环境搭建 安装配置与使用 详细图文讲解,完整实际配置过程记录(原创)

    原文网址:http://www.cnblogs.com/zdz8207/archive/2012/11/27/android-ndk-install.html android 最新 NDK r8 在w ...

  5. jQuery实现商品详情 详细参数页面切换

    利用index实现: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...

  6. android 最新 NDK r8 在window下开发环境搭建 安装配置与使用 详细图文讲解,完整实际配置过程记录(原创)

      android 最新 NDK r8 在window下开发环境搭建 安装配置与使用 详细图文讲解,完整实际配置过程记录(原创) 一直想搞NDK开发却一直给其他事情耽搁了,参考了些网上的资料今天终于把 ...

  7. POJ 3461 Oulipo[附KMP算法详细流程讲解]

      E - Oulipo Time Limit:1000MS     Memory Limit:65536KB     64bit IO Format:%I64d & %I64u Submit ...

  8. $_SERVER的详细参数整理下

    PHP编程中经常需要用到一些服务器的一些资料,特把$_SERVER的详细参数整理下,方便以后使用. $_SERVER['PHP_SELF'] #当前正在执行 脚本的文件名,与 document roo ...

  9. Sqoop Export原理和详细流程讲解

     Sqoop Export原理 Sqoop Export详细流程讲解

随机推荐

  1. 经典 SQL

    经典sql   总结一些经常用到或碰到的SQL语句,希望能与大家分享,同时也希望大家能提供更多的精妙SQL语句..... 1.delete table1 from (select * from tab ...

  2. 02js高级Function

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  3. Oracle 12c多租户架构浅析

    Oracle数据库12c的一大创新即是其采用的多租户架构.对于多租户这项新功能,业内的评价褒贬不一.有的声音认为,这项功能的用处不是特别大,但在某些场景或特定的环境下,多租户依然有它的用处.其最大的用 ...

  4. SQL高级查询的练习题

    Student(S#,Sname,Sage,Ssex) 学生表 Course(C#,Cname,T#) 课程表 SC(S#,C#,score) 成绩表 Teacher(T#,Tname) 教师表 问题 ...

  5. VS2013关于“当前不会命中断点源代码与原始版本不同”的BUG

    文件明明没有动过,竟然一直给我这种提示! 解决方法:将出问题的文件用notepad打开,然后另存为Unicode编码,覆盖原来的文件. 网上另外有一种办法是:通过重新格式化出问题的源文件亦可以解决,即 ...

  6. tcp窗口滑动以及拥塞控制

    转自:http://blog.chinaunix.net/uid-26275986-id-4109679.html TCP协议作为一个可靠的面向流的传输协议,其可靠性和流量控制由滑动窗口协议保证,而拥 ...

  7. phpstorm 设置多项目并存

    phpstorm 或 webstorm 设置多个项目可以并存: File -> settings -> Directories -> Add Content Root 中添加你当前的 ...

  8. Javascript 链式运动框架——逐行分析代码,让你轻松了解运动的原理

    所谓链式运动,就是一环扣一环.我们的很多运动实际上来说指的就是分阶段的,第一个阶段动完,下个阶段开始动. 这个链式运动框架就是用来处理这些问题的. 我们先来看下之前的运动框架,以下是Javascrip ...

  9. MVC 创建带图片的<A></A>标签

    <a href="@Url.Action("Detail", "Product", new { messageId = item.message ...

  10. Array 的五种迭代方法 -----every() /filter() /forEach() /map() /some()

    ES5定义了五个迭代方法,每个方法都接收两个参数:要在每一项上运行的函数和运行该函数的作用域对象(可选的),作用域对象将影响this的值.传入这些方法中的函数会接收三个参数:数组的项的值.该项在数组中 ...