JQuery可轻松拖动

我想用 Jquery的拖动来实现轻松的效果.但是我没有在这个插件中找到该选项.所以我想知道是否有其他插件有这个选项 – 或一个简单的解决方案.

我试图实现的效果是这样的：http://www.fileden.com/files/2009/6/4/2466215/dragease.swf

正如你可以看到的,拖动时,由于宽松,图像运动感觉更加顺畅.我也想限制拖到一个轴上,也需要让它恢复到它的位置. JQuery的draggable确实有最后两个选项,所以这很好.

示例代码已经为我提供了我想要的(除了宽松)：http://jsfiddle.net/dandoen/NJwER/1/

任何建议将不胜感激.

干杯,
Dandoen

解决方法

您可以使用原始的draggable,但是您将需要几行额外的代码.我们创建一个不可见的助手,并手动使原始对象动画化,以便使用自定义宽松操作.您可以使用动画持续时间和 easing function来自定义效果.

如果您使用任何draggables,当鼠标悬停在它们上时,它们应该正常激活,而无需等待对象到达那里.

唯一的缺点是,当我们手动更改原始元素的位置时,不能使用还原参数,但可以通过保存起始位置和拖动停止时将对象动画化来轻松整理.

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
            },'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
        },'eaSEOutCirc');
    }

    this.draggable({
        distance: options.distance,// ADDED: Helper function to create invisible helper
        helper: function(){
            return $('<div></div>').css('opacity',start: function(event,ui) {
            ui.helper.data('draggableXY.originalPosition',ui.position || {
                top: 0,left: 0
            });
            ui.helper.data('draggableXY.newDrag',true);
        },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/