插件 jQuery.pep.js 中文 API 文档

🌙
手机阅读
本文目录结构

插件 jQuery.pep 中文 API 文档

https://github.com/briangonzalez/jquery.pep.js

演示以及 http://pep.briangonzalez.org 上的更多内容。

用法

Pep 有很多选择。在这里,它们是完整的,具有默认值。需要一点帮助?请问。

名称 默认 描述
发起 function(){} 在对象上触发第一次触摸 / 单击事件时调用 [≘touchstart/ mousedown]
开始 function(){} 拖动开始时调用;何时 dx 或 dy 大于 startThreshold[ 0] 或 startThreshold[ 1]
拖动 function(){} 在拖动对象时连续调用 [≘touchmove/ mousemove]
function(){} 拖动停止时调用 [≘touchend/ mouseup]
缓解 function(){} 在对象缓和时调用
休息 function(){} 拖动停止后调用,对象已经停止
搬去 false 自定义方法,以覆盖默认的 moveTo 功能。
callIfNotStarted [‘stop’, ‘rest’] 如果对象没有移动到对象之外,则无论如何都要 startThreshold 调用用户提供的 stop 或 restfxn,或者同时调用它们
startThreshold [ 0,0] 在调用用户’start’函数之前,对象应该在 [ x,y] 方向上移动多远
[ 0,0] 为要移动的对象定义 [ x,y] 网格
还原 false 恢复到初始位置
revertAfter stop 在给定事件后恢复 - ‘stop’或’ease’
revertIf function(){ return true; } 返回 false/ true 从此函数有条件地还原对象
可弃 false CSS 选择器可以删除此元素,false 表示禁用
droppableActiveClass ‘pep-dpa’ 要添加到活动可放置父级的类,默认为 pep-dpa(可放置父级有效); this.activeDropRegions 在每个功能中检查有价值的信息
overlapFunction false 覆盖 pep 的默认重叠函数;取两个 args:a&b 如果重叠则返回 true
cssEaseString cubic-bezier(0.190,1.000,0.220,1.000) 从 [ http://matthewlein.com/ceaser/ ] 获得更多 css ease params
cssEaseDuration 750 对象从停止到休息需要多长时间(以毫秒为单位)?
constrainTo false 约束对象’window’或’parent’或 [top, right, bottom, left]; 使用 CSSTranslation 设置为 false 时效果最佳
null 将对象约束为“x”或“y”轴。设置为’auto’自动约束 x 轴或 y 轴,具体取决于用户拖动的方向
调试 false 在页面的右下角显示调试值和事件
activeClass ‘pep-active’ 拖动时添加到 pep 元素的类
startClass ‘pep-start’ 拖动开始时添加到 pep 元素的类。(如果 startThreshold 定义了一个选项,则只有在超过阈值后才会添加此类。)
easeClass ‘pep-ease’ 在缓和时添加到 pep 元素的类
乘数 1 +/- 此数字可修改为手指 / 鼠标移动与 el 移动的 1:1 比率
velocityMultiplier 1.9 +/- 此数字用于修改对象的弹性以释放它
shouldPreventDefault true 在某些情况下,我们不希望阻止我们的 Pep 对象上的默认 mousedown / touchstart
allowDragEventPropagation true 设置为 false 以阻止拖动事件通过 DOM 树冒泡
stopEvents '’ 以空格分隔的一组事件,以编程方式使对象停止
hardwareAccelerate true 应用 CSS3 银弹方法来加速 pep 对象:http://indiegamr.com/ios6-html-hardware-acceleration-changes-and-how-to-fix-them/
useCSSTranslation true 使用 CSS 变换翻译而不是顶部 / 左侧
disableSelect true 将 user-select: none(CSS)应用于对象
removeMargins true 删除边距以获得更好的对象放置
shouldEase true 禁用 / 启用缓动
地点 true 绕过 pep 的对象放置逻辑
deferPlacement false 延迟对象放置直到启动事件发生
forceNonCSS3Movement false 不要使用:这是受欢迎的。使用风险由您自己承担
elementsWithInteraction ‘input’ Pep 对象中元素的有效 CSS / jQuery 选择器,应允许用户交互,从而传播以允许移动
ignoreRightClick true 如果通过右键单击触发,将忽略启动事件
startPos { left: null, top: null } 设置默认的左 / 上坐标以在加载时定位对象
useBoundingClientRect false 使用 getBoundingClientRect()来检索元素维度而不是 jQuery 的。outerWidth()和。outerHeight()(当你的元素通过 CSS 转换缩放时很有用)

API

// Toggle functionality of all Pep objects on the page
$.pep.toggleAll()

// Explicitly disable all Pep objects on the page
$.pep.toggleAll(false)

// Explicitly enable all Pep objects on the page
$.pep.toggleAll(true)

// Unbind Pep completely from the object
var $pep = $('.pep');
$pep.pep();               // bind
$.pep.unbind( $pep );     // unbind
$pep.pep();               // bind

班级申请

对应于 pep 对象上发生的事件,应用以下类:

  • pep-active - 触发启动事件时应用;轻松完成后删除
  • pep-start - 触发启动事件时应用;停止事件发生时删除
  • pep-ease - 触发停止事件时应用;轻松完成后删除

关于 droppable 选项的说明

在 pep 提供的每个函数的上下文中有一个便利对象(拖动,休息,缓和等)被调用 activeDropRegions,这是 pep 对象当前“结束”的 jQuery 对象的数组。

$('.pep').pep({
  droppable:   '.drop-target',
  drag: function(ev, obj){
    console.log('There are ' + this.activeDropRegions.length + 'active drop regions.')
  },
  revert: true,
  revertIf: function(ev, obj){
    return !this.activeDropRegions.length;
  }
})

AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili

关注我: Github / 知乎

于2021年离开前端领域,目前重心放在研究区块链上面了

我叫朱安邦,阿西河的站长

目前在杭州从事区块链周边的开发工作,机械专业,以前从事平面设计工作。

2014年底脱产在老家自学6个月的前端技术,自学期间几乎从未出过家门,最终找到了满意的前端工作。更多>

于2021年离开前端领域,目前从事区块链方面工作了