Clone-on-Drag mit aurealia-interactjs

Question

Ich versuche interactjs mit aurelia zu verwenden, um ein System zu haben, bei dem das gezogene Objekt geklont wird, anstatt es zu verschieben.

Gemäß der FAQ von interactjs (http://interactjs.io/docs/faq/#clone-target-draggable) kann dies mithilfe des Ereignisses move pointer in interactjs erfolgen. Aurelia-interactjs scheint jedoch die interactjs-Zeigerereignisse nicht zu offenbaren.

Gibt es eine andere Möglichkeit, dies zu erreichen, über die in den FAQs von interactjs beschriebene Methode hinaus?

Answer 1

Ok, ich habe es geschafft, meine eigene Frage zu beantworten. Es gibt eine alternative Methode zum Erstellen des Klons, umrissen von Magnum79 hier: https://github.com/taye/interact.js/issues/156

Mit diesem anstelle der Interaktion move() vermeidet man die Notwendigkeit, Zeiger Ereignisse in aurelia-interactjs unterstützt zu haben. Eine geringfügige Modifikation für die Positionierung und Translation in Aurelia ergibt:

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

Das wirkt wie ein Zauber.