jQuery可轻松拖动 [英] JQuery draggable with ease
问题描述
我想通过Jquery的draggable实现轻松的效果.但是我没有在该插件中找到该选项.因此，我想知道是否还有其他具有此选项的插件-还是一个简单的解决方案.
我要达到的效果是这样的: http ://www.fileden.com/files/2009/6/4/2466215/dragease.swf
如您所见，在拖动时，由于缓和，图像移动感觉更加平滑.我还想将拖动限制到一个轴，还需要使它恢复到其原位. jQuery的draggable确实具有最后两个选项，所以很好.
该示例代码已经为我提供了我想要的东西(放松方面除外): http://jsfiddle .net/dandoen/NJwER/1/
任何建议将不胜感激.
干杯， 丹东
您可以使用原始的可拖动对象，但需要几行额外的代码.我们创建一个看不见的助手，并手动为原始对象设置动画，以跟随其自定义缓动.您可以使用动画时长和缓动功能来自定义效果. /p>
如果要使用任何可拖动对象，则当鼠标悬停在其上而不必等待对象到达那里时，它们应该可以正确激活.
唯一的缺点是，当我们手动更改原始元素的位置时，不能使用revert参数，但是可以通过保存起始位置并在拖动停止时为对象设置动画来轻松地将其归类. /p>
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/
更新:约束轴可拖动
根据要求，这是来自此线程.原来是 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
});
演示: http://jsfiddle.net/4C9p2/
I would like to achieve the ease effect with Jquery's draggable. But I did not find the option in this plugin. So I was wondering if there are other plugins that have this option - or an easy solution.
The effect I am trying to achieve is something this: http://www.fileden.com/files/2009/6/4/2466215/dragease.swf
As you can see, upon dragging, the image movement is feeling much smoother because of the easing. I would also like to constraint the dragging to one axis, also need to make it revert back to its place. JQuery's draggable does have this last two options, so thats nice.
The example code already provides me with what I want (except the easing): http://jsfiddle.net/dandoen/NJwER/1/
Any advise would be appreciated.
Cheers, Dandoen
You can use the original draggable, but you will need a few lines of extra code. We create an invisible helper and manually animate the original object to follow it with custom easing. You can play with the animation duration and the easing function to customise the effect.
In case you would use any draggables, they should be properly activating when the mouse hovers over them without having to wait for the object to get there.
The only drawback is that as we're changing the original element's position manually, the revert parameter can't be used, but it can be easily sorted out by saving the starting position and animating the object back when dragging stops.
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');
}
});
});
Demo: http://jsfiddle.net/NJwER/4/
Update: Constrained-axis draggable
As requested, here's the modified code from this thread. The original is brianpeiris' brilliant axis-constrained draggables extension.
Changing it was very simple, just added the above bits to the code and made reverting optional. I renamed it to draggableXYE (E for easing that is). It might not be the most elegant solution, it would probably be easy to write it as a small extension to the draggableXY, but it will do the job.
Dragging feels quite interesting when you switch dynamic mode on, it eases movement when the draggable snaps from one axis to the other.
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);
}
}
});
};
Usage:
$('.drag').draggableXYE({
revert: true,
dynamic: true
});
DEMO: http://jsfiddle.net/4C9p2/
这篇关于jQuery可轻松拖动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
