Interact.js resizable 和 draggable 不能一起工作

Question

我已经创建了一个 fiddle 我的脚本的外观：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

我终于明白了！

这是fiddlehttps://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
                );
            });

我将句柄移到了目标元素之外，并手动调用了 drag 事件。对我来说，通过阅读文档，我并不清楚如何做到这一点，其中大部分讨论都是关于 dragstart、dragmove、draginertiastart、dragend。这让我很困惑。不知何故，我最终只尝试 drag 并且成功了。

Interact.js resizable 和 draggable 不能一起工作

Interact.js resizable and draggable not working together

javascript

jquery

interact.js