Interact.js изменяемого размера и перетаскивания не работает вместе

Question

Я создал скрипку о том, как выглядит мой скрипт: https://jsfiddle.net/xpvt214o/701253/

Это мой код:

HTML:

<div id="_idContainer011" class="tabcontent" data-layer-id="35" data-locked="0" style="position: absolute; width: 107.012px; height: 106.273px;" data-x="-0.48828125" data-y="6.15234375">
    <img class="_idGenObjectAttribute-1 _idGenObjectAttribute-2" src="https://redbutton.nl/static/img/mieps/miep_hanging.png" alt="">
    <div class="resize-handle-container" id="handle-_idContainer011" style="width: 147px; height: 146.266px;">
        <div class="handle handle-left-top" id="handle-_idContainer011-left-top"></div>
        <div class="handle handle-right-top" id="handle-_idContainer011-right-top"></div>
        <div class="handle handle-left-bottom" id="handle-_idContainer011-left-bottom"></div>
        <div class="handle handle-right-bottom" id="handle-_idContainer011-right-bottom"></div>
        <div class="handle handle-rotate" id="handle-_idContainer011-rotate"></div>
    </div>
</div>

JS:

var target = $('#_idContainer011');

interact('#_idContainer011')
    .styleCursor(false)
    .draggable({
        manualStart: false,
        allowFrom: '.handle-rotate',
        onstart: function (event) {
            console.log('onstart');
        },
        onmove: function (event) {
            console.log('onmove');
        },
        onend: function (event) {
            console.log('onend');
        },
    });

interact('#_idContainer011')
    .styleCursor(false)
    .resizable({
        manualStart: true,
        edges: {
            left: true,
            right: true,
            bottom: true,
            top: true
        }
    })
    .on('resizemove', function (event) {
        console.log('resizemove');
    });

/**
 * Resizing element
 */
interact('.resize-handle-container .handle:not(.handle-rotate)').on('down', function (event) {
    let interaction = event.interaction,
        handle = $(event.currentTarget);

    interaction.start({
        name: 'resize',
        edges: {
            top: handle.data('top'),
            left: handle.data('left'),
            bottom: handle.data('bottom'),
            right: handle.data('right'),
        }
    },
    interact('#_idContainer011'),               // target Interactable
    target[0] // target Element
    );
});

У меня есть перетаскиваемый и изменяемый размер для одного элемента. Изменение размера работает отлично, но перетаскивание ничего не делает. Они оба работают с разными ручками. Когда я отключаю изменение размера, то draggable также приходит в себя, но как только я включаю изменение размера, draggable снова умирает (https://jsfiddle.net/xpvt214o/701281/).

Что может быть за проблема?

Answer 1

Я наконец понял это!

Вот скрипка https://jsfiddle.net/xpvt214o/706134/

Мой код в итоге выглядел так:

HTML:

<div id="_idContainer011" class="tabcontent" data-layer-id="35" data-locked="0" style="position: absolute; width: 107.012px; height: 106.273px;" data-x="-0.48828125" data-y="6.15234375">
            <img class="_idGenObjectAttribute-1 _idGenObjectAttribute-2" src="https://redbutton.nl/static/img/mieps/miep_hanging.png" alt="">
</div>
<div class="resize-handle-container" id="handle-_idContainer011" style="width: 147px; height: 146.266px;">
      <div class="handle handle-left-top" id="handle-_idContainer011-left-top"></div>
      <div class="handle handle-right-top" id="handle-_idContainer011-right-top"></div>
      <div class="handle handle-left-bottom" id="handle-_idContainer011-left-bottom"></div>
      <div class="handle handle-right-bottom" id="handle-_idContainer011-right-bottom"></div>
      <div class="handle handle-rotate" id="handle-_idContainer011-rotate"></div>
  </div>

JS:

var target = $('#_idContainer011');

interact('#_idContainer011')
                .styleCursor(false)
                .draggable({
                    manualStart: true,
                    onstart: function (event) {
                        console.log('onstart');
                    },
                    onmove: function (event) {
                        console.log('onmove');
                    },
                    onend: function (event) {
                        console.log('onend');
                    },
                })
                .resizable({
                    manualStart: true,
                    edges: {
                        left: true,
                        right: true,
                        bottom: true,
                        top: true
                    }
                })
                .on('resizemove', function (event) {
                    console.log('resizemove');
                });

                /**
             * Resizing element
             */
            interact('.resize-handle-container .handle:not(.handle-rotate)').on('down', function (event) {
                let interaction = event.interaction,
                    handle = $(event.currentTarget);

                interaction.start({
                        name: 'resize',
                        edges: {
                            top: handle.data('top'),
                            left: handle.data('left'),
                            bottom: handle.data('bottom'),
                            right: handle.data('right'),
                        }
                    },
                    interact('#_idContainer011'),               // target Interactable
                    target[0] // target Element
                );
            });

            interact('.resize-handle-container .handle.handle-rotate').on('down', function (event) {
                event.interaction.start(
                    {
                        name: 'drag',
                    },
                    interact('#_idContainer011'),               // target Interactable
                    target[0] // target Element
                );
            });

Я переместил свои маркеры за пределы целевого элемента en вручную, вызвав событие drag. Для меня было не совсем понятно, как это сделать, прочитав документы, в которых большая часть разговоров была о dragstart, dragmove, draginertiastart, dragend. Это смутило меня. Каким-то образом я попытался просто drag, и это сработало.