使用 aurealia-interactjs 克隆拖动
Clone-on-drag with aurealia-interactjs
我正在尝试将 interactjs 与 aurelia 结合使用以创建一个系统,在该系统中拖动会克隆被拖动的对象,而不是移动它。
根据 interactjs 常见问题解答 (http://interactjs.io/docs/faq/#clone-target-draggable),这可以使用 interactjs 中的移动指针事件来完成。但是,aurelia-interactjs 似乎没有公开 interactjs 指针事件。
除了 interactjs FAQ 中描述的方法之外,还有其他方法可以实现吗?
好的,我设法回答了我自己的问题。 Magnum79 在这里概述了另一种创建克隆的方法:https://github.com/taye/interact.js/issues/156
使用它而不是 interact 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;
}
}
这很有魅力。
我正在尝试将 interactjs 与 aurelia 结合使用以创建一个系统,在该系统中拖动会克隆被拖动的对象,而不是移动它。
根据 interactjs 常见问题解答 (http://interactjs.io/docs/faq/#clone-target-draggable),这可以使用 interactjs 中的移动指针事件来完成。但是,aurelia-interactjs 似乎没有公开 interactjs 指针事件。
除了 interactjs FAQ 中描述的方法之外,还有其他方法可以实现吗?
好的,我设法回答了我自己的问题。 Magnum79 在这里概述了另一种创建克隆的方法:https://github.com/taye/interact.js/issues/156
使用它而不是 interact 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;
}
}
这很有魅力。