aurelia - 使用 aurealia-interactjs 进行拖动克隆

标签 aurelia interact.js

我正在尝试将interactjs与aurelia结合使用来建立一个系统,在该系统中,拖动会克隆所拖动的对象,而不是移动它。

根据interactjs FAQ ( http://interactjs.io/docs/faq/#clone-target-draggable ),这可以使用interactjs 中的移动指针事件来完成。但是,aurelia-interactjs 似乎并未公开 interactjs 指针事件。

除了interactjs常见问题解答中描述的方法之外,还有其他方法可以实现此目的吗?

最佳答案

好吧,我设法回答了我自己的问题。 Magnum79 概述了另一种创建克隆的方法:https://github.com/taye/interact.js/issues/156

使用它代替交互 move() 就可以避免在 aurelia-interactjs 中支持指针事件。对定位稍加修改,并翻译成 aurelia 会产生:

dragStart(event) {
    event = event.detail;
    if (!event.target.dragOrigin) {
        var clone = event.target.cloneNode(true);
        clone.dragOrigin = event.target;
        event.interaction.element = clone;
        event.interaction.dragging = false;
        var dragTarget = clone;
        document.body.appendChild(clone);
        var r = event.target.getBoundingClientRect();
        clone.style.position = 'absolute';
        clone.style.left = r.left + 'px';
        clone.style.top = r.top + 'px';
    } else {
        dragTarget = event.target;
    }
}

这就像一个魅力。

关于aurelia - 使用 aurealia-interactjs 进行拖动克隆,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41175659/

相关文章:

json - 我收到来自 i18n aurelia 的错误

radio-button - Aurelia 中继器 : model. 绑定(bind)不适用于单选按钮

javascript - interact.js SVG rect 捕捉到带边距的 div

javascript - 弹出对话框但取消并确定不是功能

javascript - aurelia-dialog modal 的 body 大小不正确

javascript - 用于删除可拖动的可克隆 DIV 元素的按钮

javascript - 与引导线交互js

checkbox - 如何使用 Aurelia 在取消选中和选中时调用函数

javascript - 如何使用更改默认 this 的库来调用它?