`
huibin
  • 浏览: 755144 次
  • 性别: 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’

 

});

分享到:
评论

相关推荐

    Crawlee - 一个用于 Python 的网页抓取和浏览器自动化库,用于构建可靠的爬虫 提取 AI、LLM、RAG 或 GPT 的数据 从网站下载 HTML、PDF、JPG、PNG

    Web scraping and browser automation librarylee 涵盖了端到端的抓取和爬取,并帮助您快速构建可靠的爬取工具。 Crawlee for Python 向早期采用者开放!即使使用默认配置,您的爬虫程序看起来也几乎像人类一样,并且不会受到现代机器人保护的监视。Crawlee 为您提供了工具,让您可以抓取网络上的链接、抓取数据并以机器可读的格式持久存储数据,而无需担心技术细节。而且,由于配置选项丰富,如果默认设置不适用,您可以调整 Crawlee 的几乎任何方面以满足您的项目需求。在Crawlee 项目网站上查看完整的文档、指南和示例我们还有一个 TypeScript 实现的 Crawlee,您可以探索并利用它来完成您的项目。请访问我们的 GitHub 存储库,获取有关GitHub 上 JS/TS 的 Crawlee 的更多信息。安装我们建议您访问Crawlee 文档中的简介教程以获取更多信息。Crawlee 可作为crawleePyPI 软件包使用。核心功能包含在基础软件包中,其他功能作为可选附加功能提供,以最大限度地减少软件包大小和依赖项。要安装

    用AWLUM进行灰色编码2^2n-QAM调制的精确率Matlab代码.rar

    1.版本:matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点:参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象:计算机,电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 替换数据可以直接使用,注释清楚,适合新手

    Simple Run Blocker -应用上锁工具

    Simple Run Blocker -应用上锁工具

    基于springboot的库存管理系统的设计与实现

    基于springboot+vue的网上零食销售商城。适用于计算机类毕业设计,课程设计参考与学习用途。 系统设计考虑了企业在库存管理中的各种需求,提供了包括用户管理、商品管理、库存监控、订单处理、数据分析、客户关系维护以及系统安全与配置在内的核心功能模块。用户管理模块支持用户信息的增删改查以及角色和权限的分配,确保了系统的安全性和多级管理的便捷性。商品管理模块允许轻松录入和更新商品信息,自动化记录库存变动,为库存优化提供了数据支持。订单管理模块覆盖了订单的整个生命周期,从创建到发货再到退货,每个环节都得到了精细化管理。报表统计模块通过生成各类报表,为决策提供了数据支撑。客户管理模块则侧重于维护客户信息和购买历史,以便更好地服务客户。最后,系统设置模块允许管理员根据业务需求调整系统参数。整个系统的设计旨在帮助企业提升库存管理的效率和精确度。本文研究成果为企业提供了一套完备的库存管理解决方案。 关键词: 库存管理;Spring Boot;Vue.js;系统设计;数据库

    java面向对象 - 类与对象.doc

    java面向对象 - 类与对象 在Java编程语言中,面向对象编程(OOP)是一个核心概念。它强调以对象作为程序的基本单位,并将相关的数据和功能封装在对象中。类和对象是Java OOP的两个关键组成部分。 ### 类(Class) 类是一个模板或蓝图,它定义了对象的属性和行为。我们可以将类视为对象的类型或种类。通过类,我们可以创建(实例化)具有特定属性和行为的对象。 类的组成部分通常包括: 1. **成员变量**(属性):用于存储对象的状态或数据。 2. **方法**(行为):定义了对象可以执行的操作或功能。 3. **构造方法**:一种特殊类型的方法,用于在创建对象时初始化其状态。 4. **块**(如静态块、实例初始化块):用于执行类级别的初始化代码。 5. **嵌套类**:一个类可以包含其他类,这被称为嵌套或内部类。 ### 对象(Object) 对象是类的实例。它是根据类模板创建的具体实体,具有自己的状态和行为。每个对象都是其类的一个唯一实例,可以访问其类中定义的属性和方法。 创建对象的过程通常涉及以下几个步骤: 1. **声明**:指定对象的类型(即其所属的类

    雷达阵列天线的方向图,有结果截图,适合于初学者matlab代码.rar

    1.版本:matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点:参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象:计算机,电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 替换数据可以直接使用,注释清楚,适合新手

    Notepad-v2.20工具,是替代Notepad++的首选工具

    Notepad-v2.20工具,是替代Notepad++的首选工具

    项目管理软考基础知识点和冲刺要点.pdf

    项目管理软考基础知识点和冲刺要点

    月色场景嫦娥弹琴flash动画.zip

    月色场景嫦娥弹琴flash动画.zip

    具有恒定相对挥发度的标准双组分蒸馏塔模型 matlab代码.rar

    1.版本:matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点:参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象:计算机,电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 替换数据可以直接使用,注释清楚,适合新手

    ECharts柱状图-极坐标系下的堆叠柱状图2.rar

    图表效果及代码实现讲解链接:https://blog.csdn.net/zhangjiujiu/article/details/143997013

    原生js模仿新浪微博发布评论代码.rar

    原生js模仿新浪微博发布评论代码.rar

    重力排水罐物质平衡模型及实验结果 matlab代码.rar

    1.版本:matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点:参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象:计算机,电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 替换数据可以直接使用,注释清楚,适合新手

    音频过滤器 GUI Matlab代码.rar

    1.版本:matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点:参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象:计算机,电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 替换数据可以直接使用,注释清楚,适合新手

    商务喷气机的 μ-合成自动着陆控制器Matlab代码.rar

    1.版本:matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点:参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象:计算机,电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 替换数据可以直接使用,注释清楚,适合新手

    宏观数经济学期末考试试卷解析-经济管理-教学资料

    内容概要:本文档提供了对外经济贸易大学20XX-20XX学年第X学期《宏观经济学》期末考试的试卷,涵盖了单项选择题、名词解释、简答题和论述题,旨在测试学生对宏观经济学基础知识和理论的理解及应用能力。试题内容涉及国内生产总值、边际消费倾向、通货膨胀、财政政策、货币政策等多个概念及其政策意义。 适合人群:对外经济贸易大学或类似院校的学生,尤其是修读《宏观经济学》课程的学生,教师也可作为教学参考资料。 使用场景及目标:①帮助学生全面掌握《宏观经济学》的基础知识点,为考试复习做准备;②教师可用作课堂教学材料或考试命题的参考;③研究机构研究人员可借鉴试卷内容进行相关课题研究。 其他说明:试卷难度适中,题目覆盖面广,既考查学生的记忆能力,也强调理解和分析能力。

    数据库基本内容讲解和操作

    数据库基本内容讲解和操作

    计算机二级考试选择题练习模拟题70道及答案.doc

    计算机二级考试选择题练习模拟题70道及答案 所看及所得 内容有生成式AI自动出题并解析答案 欢迎爱学习的朋友下载

    c++语言编程用遗传算法解决背包问题的源代码

    背包问题的求解。本资源是c++语言编程用遗传算法解决背包问题的源代码。代码可以自己设置物品的数量、种群的大小。进化次数、交叉概率、变异概率等参数。背包问题是给定一组物品,每个物品都有一个重量和一个价值,确定在不超过背包最大载重量的情况下,应该选择哪些物品,使得这些物品的总价值最大。

    中创建系统级简化参数化铰接式机器人模型 matlab代码.rar

    1.版本:matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点:参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象:计算机,电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 替换数据可以直接使用,注释清楚,适合新手

Global site tag (gtag.js) - Google Analytics