- 浏览: 754109 次
- 性别:
- 来自: 郑州
文章分类
- 全部博客 (396)
- JAVA (50)
- ORACLE (22)
- HIBERNATE (1)
- SPRING (26)
- STRUTS (4)
- OTHERS (0)
- MYSQL (11)
- Struts2 (16)
- JS (33)
- Tomcat (6)
- DWR (1)
- JQuery (26)
- JBoss (0)
- SQL SERVER (0)
- XML (10)
- 生活 (3)
- JSP (11)
- CSS (5)
- word (1)
- MyEclipse (7)
- JSTL (1)
- JEECMS (2)
- Freemarker (8)
- 页面特效 (1)
- EXT (2)
- Web前端 js库 (2)
- JSON http://www.json.org (3)
- 代码收集 (1)
- 电脑常识 (6)
- MD5加密 (0)
- Axis (0)
- Grails (1)
- 浏览器 (1)
- js调试工具 (1)
- WEB前端 (5)
- JDBC (2)
- PowerDesigner (1)
- OperaMasks (1)
- CMS (1)
- Java开源大全 (2)
- 分页 (28)
- Eclipse插件 (1)
- Proxool (1)
- Jad (1)
- Java反编译 (2)
- 报表 (6)
- JSON (14)
- FCKeditor (9)
- SVN (1)
- ACCESS (1)
- 正则表达式 (3)
- 数据库 (1)
- Flex (3)
- pinyin4j (2)
- IBATIS (3)
- probe (1)
- JSP & Servlet (1)
- 飞信 (0)
- AjaxSwing (0)
- AjaxSwing (0)
- Grid相关 (1)
- HTML (5)
- Guice (4)
- Warp framework (1)
- warp-persist (1)
- 服务器推送 (3)
- eclipse (1)
- JForum (5)
- 工具 (1)
- Python (1)
- Ruby (1)
- SVG (3)
- Joda-Time日期时间工具 (1)
- JDK (3)
- Pushlet (2)
- JSP & Servlet & FTP (1)
- FTP (6)
- 时间与效率 (4)
- 二维码 (1)
- 条码/二维码 (1)
最新评论
-
ctrlc:
你这是从web服务器上传到FTP服务器上的吧,能从用户电脑上上 ...
jsp 往 FTP 上传文件问题 -
annybz:
说的好抽象 为什么代码都有两遍。这个感觉没有第一篇 和第二篇 ...
Spring源代码解析(三):Spring JDBC -
annybz:
...
Spring源代码解析(一):IOC容器 -
jie_20:
你确定你有这样配置做过测试? 请不要转载一些自己没有测试的文档 ...
Spring2.0集成iReport报表技术概述 -
asd51731:
大哥,limit传-1时出错啊,怎么修改啊?
mysql limit 使用方法
默认设置值:
$.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’
});
发表评论
-
jquery.corner插件的图片角处理
2012-03-08 15:48 1061http://www.malsup.com/jquery/co ... -
jQuery删除元素remove
2012-01-06 14:55 0写道 在DOM操作页面时,删除元素的方法jquery提供了两 ... -
解决jQuery中dbclick事件触发两次click事件
2012-01-06 14:09 0在jQuery事件绑定中,dbclick可以触发两次click ... -
模拟超链接单击事件
2012-01-06 14:06 1308js脚本 function aClick(){ ... -
jquery.ui.draggable中文文档
2012-01-06 11:02 2101[原文翻译] JQuery UI Draggable插件用来 ... -
jQuery EasyUI 可拖放(Draggable)用法
2012-01-06 11:01 1799jQuery EasyUI可以方便实现很多功能,这里将会介绍一 ... -
JQuery获得绝对,相对位置的坐标方法
2012-01-06 10:57 879获取页面某一元素的绝对X,Y坐标,可以用offset()方 ... -
jquery的table操作之在指定行后添加新行
2011-12-30 16:02 3069<!DOCTYPE HTML PUBLIC " ... -
Jquery取得iframe中元素的几种方法Javascript Jquery获取Iframe的元素、内容或者ID
2011-11-25 17:58 3240query取得iframe中元素的几种方法 在if ... -
25个超棒的jQuery日历和日期选取插件
2011-06-08 18:23 3200本文介绍25个非常不错的jQuery日历和日期选取插件, ... -
30个最佳 jQuery Lightbox 效果插件
2011-06-08 18:19 2151Lightbox 应该是最流行的图片浏览效果了,常具有功 ... -
60款很酷的 jQuery 幻灯片演示和下载
2011-06-08 18:17 1170jQuery 是一个非常优秀的 JavaScript 框 ... -
10款新鲜出炉的 jQuery 插件
2011-06-08 18:14 1187这篇文章与大家分享的是10款新鲜出炉的基于 jQuery ... -
jquery UI: 推荐8个独特应用的JQuery拖放插件Table Drag plugin
2011-04-28 19:21 1853推荐8个独特应用的JQuery拖放插件 ... -
jquery1.4后 jqDrag 拖动 不可用
2011-04-06 14:28 843复制代码 代码如下: (function($){ $.f ... -
解决flexgrid的属性showToggleBtn为false,时的bug
2011-03-29 17:42 1402采用flexgrid插件时,当属性showToggleBtn为 ... -
jqmodal遮罩层的实现
2011-03-29 15:24 1985前些天公司的项目中,为了一些特效,要用到遮罩效果。了解了一下, ... -
jquery imgareaselect 使用利用js与程序结合实现图片剪切
2011-03-12 12:17 1675/* 缺陷,当前在ff3下,用jquery的 ... -
240多个jQuery插件
2011-02-14 09:12 1037网上看到的一些jQuery插件,一共有240个,记录下来, ... -
JQuery 技术以及相关插件网址
2011-02-12 14:08 1048官网: 技术资料: jQue ...
相关推荐
jQuery-Draggable-Touch 可拖放/可拖放的翻版,适用于移动设备和平板电脑。 使用 translateX/Y 而不是 top/left。 使用作为转换参数。 添加功能 多点触控:可以同时拖动多个对象!bug $('.draggable').draggable...
本文将详细介绍 Jquery UI Draggable 的基本用法、配置参数、事件处理及常见应用场景。 #### 基本使用 Draggable 插件使得被选择的元素可以随着鼠标的移动而实现拖拽功能。下面通过几个简单的例子来展示如何使用 ...
接下来详细介绍 Draggable 的一些常用参数及其功能。 ### 1. constrain-movement (限制范围移动) 该参数用于限制元素的拖拽范围,可以通过 `axis` 或 `containment` 属性来实现。 - **axis**:限制元素在特定轴...
jQuery-UI的拖放功能主要通过`draggable()`和`droppable()`方法来实现。`draggable()`用于使元素具有可拖动的特性,而`droppable()`则使得目标区域可以接受被拖动的元素。通过设置各自的选项,如`containment`(限制...
- 使用 `$.ui` 对象,可以访问到jQuery UI的所有组件,通过参数配置实现个性化设置。 - 例如,创建一个基本的对话框: ```javascript $("#dialog").dialog({ autoOpen: false, width: 400, buttons: { "关闭...
**jQuery UI** 是一个基于 **jQuery** 库的开源项目,它提供了一套完整的用户界面组件和交互效果,包括各种可自定义的主题、对话框、拖放功能、日期选择器、进度条、滑块、排序等功能。这个压缩包中的文件是 jQuery ...
jQuery UI Draggable 概述 jQuery UI Draggable 插件可以使被选择的元素随着鼠标移动实现拖动. 可拖动的元素得到一个ui-draggable类. 拖动中的元素始终得到ui-draggable-dragging类. 假如你不仅仅只想要拖动,而是想...
- **文档**: jQuery UI 提供详细的官方文档,详细介绍每个组件的用法和选项。 - **示例**: 众多示例代码可以帮助开发者快速理解和应用组件。 - **插件**: 社区开发了许多扩展和插件,增加了更多功能和自定义选项...
它提供了多种可自定义的组件,包括对话框(Dialog)、日期选择器(Datepicker)、拖放功能(Draggable)、可排序列表(Sortable)以及各种效果和主题。在本文中,我们将深入探讨 jQuery UI 1.12.1 版本及其自定义...
JQuery UI Draggable 插件是jQuery UI库中用于实现元素拖动功能的重要组件。它允许用户通过鼠标拖曳选定的HTML元素,从而增加交互性和动态性。在使用Draggable插件时,需要理解以下几个核心知识点: 1. **基本用法*...
4. **Interactions(交互)**:包括拖放(Draggable)、可连接的拖放(Droppable)、可排序(Sortable)等功能,使得元素操作变得简单直观。 ### 使用步骤 1. **引入资源**:在 HTML 文件中,首先需要引入 jQuery ...
2. **拖放(Draggable/Droppable)**:这两个插件分别实现了元素的拖动和目标区域的接受功能,是实现动态布局和交互设计的关键。 3. **可排序(Sortable)**:使列表或表格的行可以自由排序,适用于需要用户自定义顺序...
jQuery UI 包含了多个组件,如对话框(Dialog)、拖放(Draggable)、可排序(Sortable)、可堆叠(Resizable)、下拉菜单(Selectmenu)、日期选择器(Datepicker)、滑块(Slider)等。这些组件覆盖了常见的用户...
2. **主题系统**:jQuery UI 配备了一个强大的主题生成器,允许开发者自定义组件的外观,只需通过调整颜色、字体和布局等参数,即可轻松创建出与网站设计风格相匹配的主题。在压缩包中的 "jquery-ui-1.8.16.custom" ...
jQuery UI Draggable 插件使元素变得可拖动。被拖动的元素会自动添加 `ui-draggable` 类,当元素正在被拖动时,还会添加 `ui-draggable-dragging` 类。如果你需要实现拖放功能,即不只是拖动,还可以放置到特定的...
在"jquery-ui(全)"压缩包中,你将找到详尽的文档,这些文档会介绍每个组件的用法、参数和事件。同时,代码示例和API参考可以帮助你更好地理解和使用这些功能。由于jQuery UI的代码结构清晰,易读性高,即使是初学...