`
huibin
  • 浏览: 754109 次
  • 性别: Icon_minigender_1
  • 来自: 郑州
社区版块
存档分类
最新评论

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’

 

});

分享到:
评论

相关推荐

    jQuery-Draggable-Touch:DraggableDroppable jQuery UI 翻版,适用于手机和平板电脑

    jQuery-Draggable-Touch 可拖放/可拖放的翻版,适用于移动设备和平板电脑。 使用 translateX/Y 而不是 top/left。 使用作为转换参数。 添加功能 多点触控:可以同时拖动多个对象!bug $('.draggable').draggable...

    Jquery UI Draggable中文API及使用

    本文将详细介绍 Jquery UI Draggable 的基本用法、配置参数、事件处理及常见应用场景。 #### 基本使用 Draggable 插件使得被选择的元素可以随着鼠标的移动而实现拖拽功能。下面通过几个简单的例子来展示如何使用 ...

    jQuery UI-Draggable 参数集合

    接下来详细介绍 Draggable 的一些常用参数及其功能。 ### 1. constrain-movement (限制范围移动) 该参数用于限制元素的拖拽范围,可以通过 `axis` 或 `containment` 属性来实现。 - **axis**:限制元素在特定轴...

    jQuery-UI和jsPlumb实现拖拽连接模型demo下载

    jQuery-UI的拖放功能主要通过`draggable()`和`droppable()`方法来实现。`draggable()`用于使元素具有可拖动的特性,而`droppable()`则使得目标区域可以接受被拖动的元素。通过设置各自的选项,如`containment`(限制...

    jquery-ui-1.10.1.custom.zip

    - 使用 `$.ui` 对象,可以访问到jQuery UI的所有组件,通过参数配置实现个性化设置。 - 例如,创建一个基本的对话框: ```javascript $("#dialog").dialog({ autoOpen: false, width: 400, buttons: { "关闭...

    jquery-ui js/css通用文件

    **jQuery UI** 是一个基于 **jQuery** 库的开源项目,它提供了一套完整的用户界面组件和交互效果,包括各种可自定义的主题、对话框、拖放功能、日期选择器、进度条、滑块、排序等功能。这个压缩包中的文件是 jQuery ...

    JQuery UI/API/1.7 中文帮助文档

    jQuery UI Draggable 概述 jQuery UI Draggable 插件可以使被选择的元素随着鼠标移动实现拖动. 可拖动的元素得到一个ui-draggable类. 拖动中的元素始终得到ui-draggable-dragging类. 假如你不仅仅只想要拖动,而是想...

    jquery-ui-1.10.3

    - **文档**: jQuery UI 提供详细的官方文档,详细介绍每个组件的用法和选项。 - **示例**: 众多示例代码可以帮助开发者快速理解和应用组件。 - **插件**: 社区开发了许多扩展和插件,增加了更多功能和自定义选项...

    jquery-ui-1.12.1.custom.zip

    它提供了多种可自定义的组件,包括对话框(Dialog)、日期选择器(Datepicker)、拖放功能(Draggable)、可排序列表(Sortable)以及各种效果和主题。在本文中,我们将深入探讨 jQuery UI 1.12.1 版本及其自定义...

    jquery draggable总结

    JQuery UI Draggable 插件是jQuery UI库中用于实现元素拖动功能的重要组件。它允许用户通过鼠标拖曳选定的HTML元素,从而增加交互性和动态性。在使用Draggable插件时,需要理解以下几个核心知识点: 1. **基本用法*...

    jQuery-ui下载资源

    4. **Interactions(交互)**:包括拖放(Draggable)、可连接的拖放(Droppable)、可排序(Sortable)等功能,使得元素操作变得简单直观。 ### 使用步骤 1. **引入资源**:在 HTML 文件中,首先需要引入 jQuery ...

    JQUERY-UI1.8.2插件包

    2. **拖放(Draggable/Droppable)**:这两个插件分别实现了元素的拖动和目标区域的接受功能,是实现动态布局和交互设计的关键。 3. **可排序(Sortable)**:使列表或表格的行可以自由排序,适用于需要用户自定义顺序...

    JQUERY-UI中文定制版

    jQuery UI 包含了多个组件,如对话框(Dialog)、拖放(Draggable)、可排序(Sortable)、可堆叠(Resizable)、下拉菜单(Selectmenu)、日期选择器(Datepicker)、滑块(Slider)等。这些组件覆盖了常见的用户...

    Jquery-ui.rar

    2. **主题系统**:jQuery UI 配备了一个强大的主题生成器,允许开发者自定义组件的外观,只需通过调整颜色、字体和布局等参数,即可轻松创建出与网站设计风格相匹配的主题。在压缩包中的 "jquery-ui-1.8.16.custom" ...

    jQuery UI 英文文档(doc文件)

    jQuery UI Draggable 插件使元素变得可拖动。被拖动的元素会自动添加 `ui-draggable` 类,当元素正在被拖动时,还会添加 `ui-draggable-dragging` 类。如果你需要实现拖放功能,即不只是拖动,还可以放置到特定的...

    jquery-ui(全)

    在"jquery-ui(全)"压缩包中,你将找到详尽的文档,这些文档会介绍每个组件的用法、参数和事件。同时,代码示例和API参考可以帮助你更好地理解和使用这些功能。由于jQuery UI的代码结构清晰,易读性高,即使是初学...

Global site tag (gtag.js) - Google Analytics