2

我已经创建了我的脚本外观的小提琴：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/）。

问题可能是什么？

4

1 回答 1

0

我终于想通了！

这是小提琴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，它奏效了。

于 2018-08-30T09:08:48.400 回答