Clone-on-drag with aurealia-interactjs

Question

I'm trying to use interactjs with aurelia to have a system where dragging clones the dragged object, rather than moves it.

According to the interactjs FAQ (http://interactjs.io/docs/faq/#clone-target-draggable), this can be done using the move pointer event in interactjs. However, aurelia-interactjs doesn't appear to expose the interactjs pointer events.

Is there another way to accomplish this, beyond the method described in the interactjs FAQ?

Answer 1

Ok, I managed to answer my own question. There's an alternative method of creating the clone, outlined by Magnum79 here: https://github.com/taye/interact.js/issues/156

Using that instead of the interact move() one obviates the need to have pointer events supported in aurelia-interactjs. A slight modification for positioning, and translation into aurelia yields:

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

Which works like a charm.