droppable的详细参数讲解
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’
});
droppable的详细参数讲解的更多相关文章
- iptables详细参数讲解
table 表 --> chain 链 --->rule 规则Commands:Either long or short options are allowed. --append -A ...
- android ui界面设计参数讲解
百度文库: http://wenku.baidu.com/link?url=s66Hw6byBEzmjL77doYL1YQN4Y_39F7MovaHKs5mVGrzTDOQCAmiM-1N_6Cdm- ...
- Sqoop Import原理和详细流程讲解
Sqoop Import原理 Sqoop Import详细流程讲解 Sqoop在import时,需要指定split-by参数.Sqoop根据不同的split-by参数值来进行切分,然后将切分出来的区域 ...
- 【转】android 最新 NDK r8 在window下开发环境搭建 安装配置与使用 详细图文讲解,完整实际配置过程记录(原创)
原文网址:http://www.cnblogs.com/zdz8207/archive/2012/11/27/android-ndk-install.html android 最新 NDK r8 在w ...
- jQuery实现商品详情 详细参数页面切换
利用index实现: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...
- android 最新 NDK r8 在window下开发环境搭建 安装配置与使用 详细图文讲解,完整实际配置过程记录(原创)
android 最新 NDK r8 在window下开发环境搭建 安装配置与使用 详细图文讲解,完整实际配置过程记录(原创) 一直想搞NDK开发却一直给其他事情耽搁了,参考了些网上的资料今天终于把 ...
- POJ 3461 Oulipo[附KMP算法详细流程讲解]
E - Oulipo Time Limit:1000MS Memory Limit:65536KB 64bit IO Format:%I64d & %I64u Submit ...
- $_SERVER的详细参数整理下
PHP编程中经常需要用到一些服务器的一些资料,特把$_SERVER的详细参数整理下,方便以后使用. $_SERVER['PHP_SELF'] #当前正在执行 脚本的文件名,与 document roo ...
- Sqoop Export原理和详细流程讲解
Sqoop Export原理 Sqoop Export详细流程讲解
随机推荐
- iOS设计模式解析(五)责任链模式
责任链模式:使多个对象都有机会处理请求,从而避免发送者和接受者之间发生耦合. 应用场景: 有多个对象可以处理请求,而处理程序只有在运行时才能确定 例如: 英雄联盟中伤害计算,伤害类型分为AP.AD.真 ...
- C# DropDownList绑定添加新数据的几种方法
第一种:在前台手动绑定(适用于固定不变的数据项) <asp:DropDownList ID="DropDownList1" runat="server"& ...
- 新学了一个用python编写的简单的百度贴吧帖子的爬虫
# -*- coding: utf-8 -*- #--------------------------------------- # 作者:chendn # 语言:Python 2.7.10 #--- ...
- 【Chromium中文文档】OS X 沙箱设计
OS X 沙箱设计 转载请注明出处:https://ahangchen.gitbooks.io/chromium_doc_zh/content/zh//General_Architecture/OSX ...
- linux的NetworkManager服务
在开启NetworkManager服务的情况下,在终端下敲“service network restart”命令: 正在关闭接口 eth0: 设备状态:3 (断开连接) [确定] 正在关闭接口 eth ...
- linux里的bootproto的none,static,dhcp有什么区别
这个是网络配置参数:BOOTPROTO=static 静态IP BOOTPROTO=dhcp 动态IP BOOTPROTO=none 无(不指定)通常情况下是dhcp或者static,通过指定方式 ...
- 用做网页开发经历了三个阶段(附长篇讨论) good
用做网页开发经历了三个阶段:第一阶:傻干阶段使用Intraweb,傻瓜型,无需知道javascript,html,css,会pascal就可以了. 第二阶:困惑阶段使用Intraweb,有很多限制,比 ...
- android NDK jni下的c文件 Unresolved inclusion
原因是在eclipse编辑环境中没有找到对应的include中的文件.解决方法是将包含该文件的include目录作为新的linked folder加入工程中.具体方法如下:1. 右击工程->Ne ...
- Recover a file when you use git reset head by mistake.
$ git init Initialized empty Git repository in .git/ $ echo "testing reset" > file1 $ g ...
- string 转换char类型
将string转换成char类型 const char *c = string.c_str() char转换string char *c_name = "char" string ...