Блог

Я использую Ember, и я пытаюсь настроить простой перетаскиваемый пример div, используя interact.js библиотека, но у меня возникли некоторые проблемы.

Я знаю, что библиотека НЕ изменяет DOM, и вам нужно сделать это самостоятельно, и это нормально. Я следую примеру на веб-сайте, но перевожу его на Ember:

https://interactjs.io/docs/draggable

Вот что я сделал:

Шаг №1: Создайте шаблон Ember с помощью простого DIV

 <div
    role="button"
    class="draggable-card w-20 h-20"
/> 

Тег «перетаскиваемая карта» станет «интерактивным», когда я вызову библиотеку interact в контроллере.

Шаг № 2: создайте контроллер Ember

Контроллер работает как «код позади» и контролирует состояние. В этом случае наш контроллер выполняет ряд действий:

2.1 Вызывает библиотеку Interact, чтобы сделать объекты DOM «интерактивными» (т.е. перетаскиваемыми).

 this.draggableCards = interact('.draggable-card');

this.draggableCards.draggable({
    origin: 'self',
    inertia: false,
    listeners: {
        start: this.dragStart,
        move: this.dragMove,
        end: this.dragEnd
    }
}); 

Это делает все элементы «перетаскиваемой карты» перетаскиваемыми, а также создает обработчики перетаскивания для dragStart, dragMove и dragEnd.

2.2 Создайте обработчик события dragStart

 @action
dragStart(event) {
    this.isDraggingCard = true;

    // modify dom to support dragging the element
    event.target.style.position = 'relative';
    event.target.style.touchAction = 'none';
    event.target.style.userSelect = 'none';       
    event.target.style.left = '0px';
    event.target.style.top = '0px';

    // used to track position from start of drag
    this.dragCardPositionDelta = { dx: 0, dy: 0 };     
}; 

2.3 Создайте обработчик события dragMove

 @action
dragMove(event) {
    this.dragCardPositionDelta.dx  = event.dx;
    this.dragCardPositionDelta.dy  = event.dy;

    event.target.style.transform =
        `translate(
            ${this.dragCardPositionDelta.dx}px,
            ${this.dragCardPositionDelta.dy}px
        )`;
};   

Насколько я понимаю, (event.dx, event.dy) указывает количество пикселей, на которые элемент был перемещен с момента последнего вызова dragMove. Я отслеживаю (dragCardPositionDelta.dx и dragCardPositionDelta.dy), который отслеживает пиксели, которые элемент переместил с момента начала перетаскивания.

Настройка этого делает элемент перетаскиваемым, но (event.dx, event.dy), похоже, не вычисляется правильно при перетаскивании. В результате div прыгает по месту. Я также замечаю, что div не перемещается последовательно с указателем. Все это очень странно, и, учитывая, насколько прост пример на веб-сайте, я не уверен, что происходит не так. Я могу только подозревать, что для некоторых (event.dx, event.dy) вычисляется неправильно.

Я настроил аналогичный пример с другой библиотекой: Draggabilly (https://draggabilly.desandro.com ) и это в значительной степени работало из коробки, но я временно отказался от него из-за некоторых проблем, таким образом, опробовав Interact.js .

Любая помощь будет оценена.

Спасибо,

Дэйв

После некоторых экспериментов с этой вертушкой для тлеющих углей: https://ember-twiddle.com/b9adfc02c351f881b05c7032d18812e7?openFiles=controllers.application.js,

Я обнаружил, что удаление origin: 'self' из вызова перетаскиваемого исправило перескакивание. Я не знаю почему.