jQuery UI Перетаскиваемый возврат в исходное положение, если он перемещен менее чем на определенное расстояние

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);
    }
});

демонстрация