JQuery легко переносится

Ответ 1

Вы можете использовать оригинальное перетаскивание, но вам понадобятся несколько строк дополнительного кода. Мы создаем невидимый помощник и вручную анимируем исходный объект, чтобы следить за ним с помощью пользовательского упрощения. Вы можете играть с продолжительностью анимации и функция ослабления для настройки эффекта.

Если вы будете использовать любые перетаскиваемые элементы, они должны быть правильно активированы, когда мышка нависает над ними, не дожидаясь, пока объект не появится.

Единственный недостаток заключается в том, что при изменении исходной позиции элемента вручную параметр отмены не может быть использован, но его можно легко отсортировать, сохранив начальную позицию и оживив объект при перетаскивании стоп.

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
            },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 $('<div></div>').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
});

DEMO: http://jsfiddle.net/4C9p2/

Ответ 2

Я не думаю, что у draggable есть опция для этого. Возможно, вам придется катиться самостоятельно. Если вы решите, вы можете сделать что-то вроде этого:

http://jsfiddle.net/NJwER/2/

Это действительно грубо (но было интересно). Вероятно, вы захотите сделать динамическую динамическую динамику в зависимости от того, насколько далеко элемент был от вашего курсора и использовать смягчение, отличное от стандартного.

$(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);
        }
    });
});​

Ответ 3

Я видел множество вопросов об ослаблении/импульсе сопротивления. Я наконец добрался до создания плагина из своего решения. Попробуйте здесь:

http://jsfiddle.net/mattsahr/bKs7w/

Основное использование прост.

    $('.dragme').draggable().dragMomentum();

Это упорядочивает предыдущую работу из этого вопроса.

Примечания - СОДЕРЖАНИЕ -.dragMomentum отлично работает с опцией "сдерживания", заменяет нормальное поведение хорошим приложением, когда вы отпускаете. И он делает ту же самую привязку к краю с окном браузера, если нет контейнера div.

COMPATIBILIEY - работает на ie9, chrome12, firefox5. Прошлое, я не знаю.