如果移动小于一定距离，jQuery UI Draggable将恢复到原始位置

Question

我正在使用jQuery UI来使对象可拖动。

我知道如何在所有情况下使对象恢复到原始位置： $("#draggable").draggable({ revert: true });

但是，如何在物体向左移动或向右移动宽度的80％时，如何使物体恢复？

Answer 1

您可以根据start事件中确定的起始位置有条件地还原。

$('.dataCard').draggable({ axis: 'x', 
    revert: function() {
        //determine the start/end positions
        var end = $(this).position().left;
        var start = $(this).data('start');
        //subtract end and start to get the (absolute) distance
        var distance = Math.abs(end - start);
        var width = $(this).width();
        //if the distance is more than 80% of the width don't revert
        if(distance > (width * .8))
        {
             return false;
        }
        //else revert
        return true;
    },
    start: function(){
        //get the start position
        var start = $(this).position().left;
        //store the start position on this element
        $(this).data('start', start);
    }
});

Demonstration