Jquery UI,在还原可拖动时使用线性而不是摆动
Jquery UI, using linear rather than swing, when reverting draggable?
我正在使用Jquery UI的可拖动功能,我启用了还原功能。
默认情况下,div 以"摆动"运动恢复,
我想知道如何使div 以线性运动恢复。
您不能在可拖动对象上使用常规还原方法来获取自定义返回缓动,因为它仅支持更改持续时间。如果要使还原具有自定义效果,则需要一些自定义代码,如下所示,并插入JQueryUI展示 http://jqueryui.com/demos/effect/#easing 中的任何自定义缓动效果。
请注意,在停止方法中,我使缓动效果变得 easeInElastic 以突出显示差异,但您可以将其更改为您想要的任何内容(在您的情况下为线性)。
请注意,您需要包含 JQuery UI 才能获得这些效果。
http://jsfiddle.net/gregjuva/Hjf8p/
$(function() {
$("#draggable").draggable({
// We Can't use revert, as we animate the original object so
//revert: true, <- don't use this
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.
// cache $this to keep from having to make
// lots of DOM calls w jquery
var $this = $(this);
$this.data('starttop',$this.position().top)
.data('startleft',$this.position().left);
},
stop: function(){
// When dragging stops, revert the draggable to its
// original starting position.
var $this = $(this);
$this.stop().animate({
top: $this.data('starttop'),
left:$this.data('startleft')
},1000,'easeInElastic');
// replace with whatever jQueryUI easing you want
},
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,
left: ui.helper.position().left
},0,'linear');
}
});
});
相关文章:
- 有没有任何方法可以将控制器从文件加载到ui路由器$stateProvider中
- jQuery UI自动完成突然停止工作
- 如何使用skip参数使用angular ui引导进行服务器端分页
- AngularJS UI路由器不能像ng路由器那样工作
- 我可以更改剑道UI网格吗's的外键值
- 剑道UI内联编辑:如何在点击其他按钮时隐藏按钮
- Rails/JSON:如何将JSON用于jquery UI自动完成表单
- 停止jQuery UI滑块移动超过给定值
- 混合 ui-sref 和 $state.go 在 Angular ui-router 中进行状态转换
- Jquery UI自动完成无法工作
- 语义ui如何使用javascript启用或禁用下拉列表
- jquery ui滑块上的滑块值
- jQuery UI可排序-多连接列表拖动
- 如何在Angular UI网格中选择下一行
- 对具有ui typeahead的对象中的值执行orderBy
- Highcharts colorsByPoint与系列中的线性渐变一起使用时不起作用
- AngularJS ui路由器html5模式中断路由
- Jquery UI,在还原可拖动时使用线性而不是摆动
- 是否可以在剑道UI线性仪表上仅显示最大值/最小值
- Kendo UI线性量规的反向