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
    );
});

我可以拖动和调整单个元素的大小。调整大小效果完美，但是可拖动却无济于事。它们都使用不同的手柄。当我停用调整大小功能后，可拖动功能也会生效，但是一旦启用调整大小功能，可拖动功能就会再次失效（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
                );
            });

我手动将drag事件的句柄移动到了目标元素之外。对我来说，从阅读文档的大部分内容都是关于dragstart，dragmove，draginertiastart，dragend的文档中，我并不清楚如何做到这一点。那让我感到困惑。不知何故，我最终只尝试了drag，就成功了。

可调整大小和可拖动的Interact.js无法一起使用

1 个答案: