Перетаскивание с помощью mootools на мобильных устройствах

#javascript #drag-and-drop #mobile-safari #dom-events #mootools

#javascript #перетаскивание #mobile-safari #dom-события #mootools

Вопрос:

Есть ли способ заставить класс mootools «Перетаскивать» на Safari mobile? Пожалуйста, не связывайте меня с другими фреймворками.

Ответ №1:

Вот мое решение, как заставить Mootools Drag поддерживать события касания. Этот метод не требовал от меня дополнительного редактирования файла mootools, поскольку я использовал Class.refactor (это тестируется только с Mootools v.1.3.1) — он также не нарушает обычные события щелчка

 Class.refactor(Drag,
    {
        attach: function(){
            this.handles.addEvent('touchstart', this.bound.start);
            return this.previous.apply(this, arguments);
        },

        detach: function(){
            this.handles.removeEvent('touchstart', this.bound.start);
            return this.previous.apply(this, arguments);
        },

        start: function(event){
            document.body.addEvents({
                touchmove: this.bound.check,
                touchend: this.bound.cancel
            });
            this.previous.apply(this, arguments);
        },

        check: function(event){
            if (this.options.preventDefault) event.preventDefault();
            var distance = Math.round(Math.sqrt(Math.pow(event.page.x - this.mouse.start.x, 2)   Math.pow(event.page.y - this.mouse.start.y, 2)));
            if (distance > this.options.snap){
                this.cancel();
                this.document.addEvents({
                    mousemove: this.bound.drag,
                    mouseup: this.bound.stop
                });
                document.body.addEvents({
                    touchmove: this.bound.drag,
                    touchend: this.bound.stop
                });
                this.fireEvent('start', [this.element, event]).fireEvent('snap', this.element);
            }
        },

        cancel: function(event){
            document.body.removeEvents({
                touchmove: this.bound.check,
                touchend: this.bound.cancel
            });
            return this.previous.apply(this, arguments);
        },

        stop: function(event){
            document.body.removeEvents({
                touchmove: this.bound.drag,
                touchend: this.bound.stop
            });
            return this.previous.apply(this, arguments);
        }
    });

1. потрясающе, 1 — если это было протестировано на производстве и работает, почему бы не изменить исходные классы и вместо этого отправить запрос на извлечение в mootools-more? сенсорные устройства гораздо более распространены, и это полезно иметь из коробки.

2. Отлично!! знаете ли вы, как отключить прокрутку во время перетаскивания события касания? Мое окно прокручивается одновременно с перетаскиванием…

3. На самом деле существует проблема из-за ошибки Android, см. uihacker . blogspot.it/2011/01/android-touchmove-event-bug.html и code.google.com/p/android/issues/detail?id=5491 . По сути, вам нужно вызвать event.preventDefault() в обратном вызове touchmove, а затем настроить параметры, чтобы правильно удалить обработчик событий

Ответ №2:

Я сам это исправил. Это так же просто, как сопоставить события мыши с событиями касания.

Итак, решение заключается в поиске и замене:

 mousedown -> touchstart
mouseup -> touchend
mousemove -> touchmove

Ответ №3:

Не могли бы вы попробовать https://github.com/kamicane/mootools-touch ?

1. Это для mootools 1.2, а я использую 1.3. Также я использую много компонентов, основанных на собственном классе Drag, поэтому я предпочитаю исправление для этого класса. Спасибо!