如果移动小于一定距离，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