- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我想用Jquery的draggable来实现ease效果。但我在这个插件中没有找到这个选项。所以我想知道是否有其他插件有这个选项 - 或者一个简单的解决方案。
我想要达到的效果是这样的:http://www.fileden.com/files/2009/6/4/2466215/dragease.swf
正如您所看到的,拖动时,由于缓动,图像移动感觉更加平滑。我还想将拖动限制在一个轴上,还需要使其恢复到原来的位置。 JQuery 的可拖动确实有最后两个选项,所以这很好。
示例代码已经为我提供了我想要的(除缓动之外):http://jsfiddle.net/dandoen/NJwER/1/
如有任何建议,我们将不胜感激。
干杯,丹东园
最佳答案
您可以使用原始的可拖动项,但需要几行额外的代码。我们创建一个不可见的助手,并手动为原始对象设置动画,以使用自定义缓动来跟随它。您可以使用动画持续时间和 easing function自定义效果。
如果您要使用任何可拖动对象,当鼠标悬停在它们上方时,它们应该正确激活,而不必等待对象到达那里。
唯一的缺点是,当我们手动更改原始元素的位置时,无法使用 revert 参数,但可以通过保存起始位置并在拖动停止时将对象动画回来来轻松解决这个问题。
HTML:
<div id="draggable" class="ui-widget-content">
<p>Revert the original</p>
</div>
CSS:
#draggable {
position: relative;
width: 100px;
height: 100px;
padding: 0.5em;
float: left;
margin: 0 10px 10px 0;
background-color: red;
border: 2px solid gray;
}
Javascript:
$(function() {
$("#draggable").draggable({
// Can't use revert, as we animate the original object
//revert: true,
axis: "y",
helper: function(){
// Create an invisible div as the helper. It will move and
// follow the cursor as usual.
return $('<div></div>').css('opacity',0);
},
create: function(){
// When the draggable is created, save its starting
// position into a data attribute, so we know where we
// need to revert to.
var $this = $(this);
$this.data('starttop',$this.position().top);
},
stop: function(){
// When dragging stops, revert the draggable to its
// original starting position.
var $this = $(this);
$this.stop().animate({
top: $this.data('starttop')
},1000,'easeOutCirc');
},
drag: function(event, ui){
// During dragging, animate the original object to
// follow the invisible helper with custom easing.
$(this).stop().animate({
top: ui.helper.position().top
},1000,'easeOutCirc');
}
});
});
演示:http://jsfiddle.net/NJwER/4/
根据要求,这是来自 this thread 的修改后的代码。原始版本是brianpeiris出色的轴约束可拖动扩展。
更改它非常简单,只需将上述位添加到代码中并使恢复成为可选即可。我将其重命名为draggableXYE(E 表示缓动)。它可能不是最优雅的解决方案,将其编写为 draggableXY
的小扩展可能很容易,但它可以完成这项工作。
当您打开动态模式时,拖动感觉非常有趣,当可拖动对象从一个轴捕捉到另一个轴时,它可以简化移动。
Javascript:
$.fn.draggableXYE = function(options) {
var defaultOptions = {
distance: 5,
dynamic: false
};
options = $.extend(defaultOptions, options);
// ADDED: Store startPosition for reverting
var startPosition = this.position();
// ADDED: Function to apply easing to passed element
function AnimateElement(element, newpos) {
$(element).stop().animate({
top: newpos.top,
left: newpos.left
}, 1000, 'easeOutCirc');
}
this.draggable({
distance: options.distance,
// ADDED: Helper function to create invisible helper
helper: function(){
return $('<div></div>').css('opacity',0);
},
start: function(event, ui) {
ui.helper.data('draggableXY.originalPosition', ui.position || {
top: 0,
left: 0
});
ui.helper.data('draggableXY.newDrag', true);
},
drag: function(event, ui) {
var originalPosition = ui.helper.data('draggableXY.originalPosition');
var deltaX = Math.abs(originalPosition.left - ui.position.left);
var deltaY = Math.abs(originalPosition.top - ui.position.top);
var newDrag = options.dynamic || ui.helper.data('draggableXY.newDrag');
ui.helper.data('draggableXY.newDrag', false);
var xMax = newDrag ? Math.max(deltaX, deltaY) === deltaX : ui.helper.data('draggableXY.xMax');
ui.helper.data('draggableXY.xMax', xMax);
var newPosition = ui.position;
if (xMax) {
newPosition.top = originalPosition.top;
}
if (!xMax) {
newPosition.left = originalPosition.left;
}
// ADDED: Animate original object with easing to new position
AnimateElement(this, newPosition);
return newPosition;
},
// ADDED: Stop event to support reverting
stop: function() {
if (options.revert) {
AnimateElement(this, startPosition);
}
}
});
};
用法:
$('.drag').draggableXYE({
revert: true,
dynamic: true
});
关于JQuery 可轻松拖动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6398854/
我尝试将resteasy与自定义对象一起使用,当我创建jar文件时,它与intellij IDE一起工作正常,但失败并出现以下异常 org.jboss.resteasy.core.NoMessageB
我正在寻找一种在easy-close选项为TRUE时基于Shiny模态关闭触发事件的方法(因此,在模态外部单击将其关闭)。由于没有链接到模式的ID,因此我似乎无法捕获此事件。我尝试在“观察”事件中包装
假设我有一些定义如下的类: class Security { Boolean AuthenticateUser(String username, String password); B
正如标题所说,Coq 可以用作模型检查器吗?我可以将模型检查与 Coq 证明混合使用吗?这是常态吗?谷歌谈论“微积分”,有没有人有这方面的经验或类似的经验?是否建议以这种方式使用 Coq,或者我应该寻
是否有一种方法(设置或快捷方式)可以显示输出超过 500 行的查询的总行数 - 即,无需修改首选项中的“结果集页面大小”值?我本质上是在寻找 select count(*) from () t 的输出
我想这样做: System.out.println("안녕하세요!"); 但是当我尝试在 Eclipse 中进行编译时,出现“某些字符无法使用 MacRoman 字符编码进行编码”弹出式错误消息。我正
如果我有一个用这样的字符串初始化的框架 setter CTFramesetterRef framesetter = CTFramesetterCreateWithAttributedString(at
所以这里没有什么新内容,我只是想得到一些澄清,但似乎在其他帖子中找不到任何澄清。 我正在安静地创建一个新资源,例如: /books (POST) 有一个 body : { title: 'The
我有很多预处理器宏定义,如下所示: #define FOO 1 #define BAR 2 #define BAZ 3 在实际应用中,每个定义对应一个解释器虚拟机中的一条指令。宏的编号也不是连续的,以
使用 SpriteKit 开发 iOS 游戏。我的背景由 map block 组成(本质上是无限 map ,程序生成)。 我们的系统旨在管理 map 的“ block ”,我们只加载玩家附近的 blo
我需要在 Ruby 中拆分一个具有以下格式的字符串: [{a:1,b:2,c:3,d:4},{a:5,b:6,c:7,d:8},{a:9,b:10,c:11,d:12},{a:13,b:14,c:1
Linq 有一个名为 Take() 的便捷运算符方法,可以返回任何实现 IEnumerable 的元素中给定数量的元素。 jQuery 中是否有类似的东西可以处理数组? 或者,换个方式问:如何在 Ja
每当我使用以下代码在文档中插入图像时, var cursor = DocumentApp.getActiveDocument().getCursor(); var image = cursor
今天看到这样一段代码: if ( not defined($reply_address) or not defined($from_name) or not defined(
这个问题不太可能帮助任何 future 的访问者;它只与一个小的地理区域、一个特定的时间点或一个非常狭窄的情况有关,这些情况并不普遍适用于互联网的全局受众。为了帮助使这个问题更广泛地适用,visit
刚刚了解 mercurial 的 --style和 --template可用于 hg log 的选项和 hg tip我发现它们非常有帮助,但我不知道把我的“样式文件”放在哪里 我有一个“样式文件”,它
是否有一些应用程序可以自动 bundle (并缩小)包含 require('file.js') 调用的 JS 项目?这样它们就会合并并生成一个文件。 具体来说,我正在谈论when.js ,一个带有大量
如何(轻松)获取 Sublime Text 3 中的当前文件路径 我不经常使用 ST 控制台(我只使用它一次来安装包管理器),但我认为这可能是一个好方法: 像某种pwd命令一样获取当前文件路径。 但这
嗨,我正在使用resteasy api,我需要使用Map作为QueryParam。我可以使用列表作为 QueryParam,但是当我尝试传递 Map 时,我收到下面提到的错误。 这是我的服务代码 @G
假设我有一个 C++ 代码(请参阅下面的简单示例)。我想让期刊审稿人轻松安装/运行 所以我认为最简单的方法是将其变形为简化的类 R 包的 tar.gz 文件,以便裁判可以安装它通过简单地调用 inst
我是一名优秀的程序员,十分优秀!