JQuery可轻松拖动
我想用Jquery的draggable来实现轻松的效果。 但我没有在这个插件中找到该选项。 所以我想知道是否有其他插件有这个选项 – 或一个简单的解决方案。
我试图实现的效果是这样的： http ： //www.fileden.com/files/2009/6/4/2466215/dragease.swf
正如您所看到的，在拖动时，由于缓和，图像移动感觉更加平滑。 我还想将拖动限制为一个轴，还需要使其恢复到原位。 JQuery的draggable确实有最后两个选项，所以这很好。
示例代码已经为我提供了我想要的东西（除了缓动）： http ： //jsfiddle.net/dandoen/NJwER/1/
任何建议将不胜感激。
干杯，丹多恩
您可以使用原始的draggable，但是您需要几行额外的代码。 我们创建一个不可见的帮助器并手动设置原始对象的动画，以便使用自定义缓动来跟随它。 您可以使用动画持续时间和缓动function来自定义效果。
如果您使用任何可拖动的，当鼠标hover在它们上面时它们应该正确激活，而不必等待对象到达那里。
唯一的缺点是，当我们手动更改原始元素的位置时，无法使用恢复参数，但可以通过保存起始位置并在拖动停止时将对象设置为动画来轻松排序。
HTML：
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 $('').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 $('').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/
我已经看到了很多关于阻力缓和/动量的问题。 我终于开始从我的解决方案中制作一个插件了。 在这里试试：
http://jsfiddle.net/mattsahr/bKs7w/
基本用法很简单。
$（ 'dragme'）可拖动（）dragMomentum（）。
它从这个问题中整理了一些早期的工作。
注释 – 容器 – .dragMomentum与“包含”选项的效果非常好，当你放手时用一个很好的快照动作替换正常的行为。 如果没有容器div，它与浏览器窗口的边缘相同。
COMPATIBILIEY – 适用于ie9，chrome12，firefox5。 过去，我不知道。
我认为draggable没有选择权。 你可能需要自己动手。 如果你选择，你可能想做这样的事情：
这真的很粗糙（但有点儿很有趣）。 您可能希望根据元素与光标的距离以及使用默认值以外的缓动来使动画持续时间动态化。
$(function() { var dragging = false; var dragger, offsetX, offsetY; $("#draggable").mousedown(function(e) { dragging = true; dragger = this; offsetX=e.offsetX; offsetY=e.offsetY; }); $("body").mouseup(function(e) { dragging = false; }).mousemove(function(e) { if (dragging) { $(dragger).stop().animate({left:e.pageX-offsetX, top:e.pageY-offsetY},300); console.log(e.pageX+" "+e.pageY); } }); });