Dragula che rilascia un elemento diverso da trascinato

Question

In dragula si ha una potenziale copia unidirezionale da un contenitore a un altro - Voglio usarlo per un'interfaccia utente in cui si trascina un simbolo che rappresenta un elemento in un contenitore e lo si genera " Vero affare "- il vero affare è un elemento arbitrario diverso.

La maggior parte di questo è stato davvero facile:

dragula([].slice.call(document.querySelectorAll('.container')), { 
 
    copy: function (el, source) { 
 
    return source === document.getElementById('c1') 
 
    }, 
 
    accepts: function (el, target) { 
 
    return target !== document.getElementById('c1') 
 
    }, 
 
    removeOnSpill: true 
 
}).on('drop', function (el) { 
 
    var newNode = document.createElement("div"); 
 
    newNode.textContent = "The real deal"; 
 
    newNode.classList.add("elem"); 
 
    el.parentNode.replaceChild(newNode, el); 
 
});

.container { 
 
    border: 1px solid #000; 
 
    min-height:50px; 
 
    background:#EEE; 
 
} 
 
.elem { 
 
    padding:10px; 
 
    border: 1px solid #000; 
 
    background:#FFF; 
 
    margin:5px; 
 
    display: inline-block; 
 
}

<div id="c1" class="container"> 
 
    <div class="elem">Icon1</div> 
 
    <div class="elem">Icon2</div> 
 
    <div class="elem">Icon3</div> 
 
    <div class="elem">Icon4</div> 
 
    <div class="elem">Icon5</div> 
 
    <div class="elem">Icon6</div> 
 
</div> 
 
<div id="c2" class="container"></div> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/dragula/3.6.8/dragula.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/dragula/3.6.8/dragula.min.css" rel="stylesheet" 
 
     />

Come potete vedere - questo sostituisce l'elemento su goccia dandomi il risultato che voglio. Tuttavia, l'immagine fantasma durante il trascinamento è ancora l'elemento "Simbolo" originale.

È possibile sostituire l'elemento "To be dropped" sul trascinamento in modo che sia il fantasma che il risultato finale assomiglino all'elemento richiesto?

Answer 1

C'è un evento shadow che si attiva ripetutamente durante il trascinamento. Pensavo di poterlo usare per sostituire l'elemento ombra ma sembra che Dragula mantenga un riferimento ad esso, quindi se lo rimuovo smetterà di funzionare.

Apparentemente il modo più semplice per aggirare questo è impostare il fantasma originale su display: none e metterne un altro accanto, quindi pulirlo su dragend.

Non ho idea se le differenze di dimensioni tra l'elemento ombra reale e falso interromperanno il posizionamento. Attraverserò quel ponte quando ci arrivo.

function makeElement(){ 
 
    var newNode = document.createElement("div"); 
 
    newNode.textContent = "Wootley!"; 
 
    newNode.classList.add("elem"); 
 
    return newNode; 
 
} 
 

 
dragula([].slice.call(document.querySelectorAll('.container')), { 
 
    copy: function (el, source) { 
 
    return source === document.getElementById('c1') 
 
    }, 
 
    accepts: function (el, target) { 
 
    return target !== document.getElementById('c1') 
 
    }, 
 
    removeOnSpill: true 
 
}).on('dragend', function (el) { 
 
    this._shadow.remove(); 
 
    this._shadow = null; 
 
}).on('drop', function (el) { 
 
    el.parentNode.replaceChild(makeElement(), el); 
 
}).on('shadow', function(el, target){ 
 
    if (!this._shadow){ 
 
     this._shadow = makeElement(); 
 
     this._shadow.classList.add("gu-transit"); 
 
    } 
 
    el.style.display = 'none'; 
 
    el.parentNode.insertBefore(this._shadow, el); 
 
});

.container { 
 
    border: 1px solid #000; 
 
    min-height:50px; 
 
    background:#EEE; 
 
} 
 
.elem { 
 
    padding:10px; 
 
    border: 1px solid #000; 
 
    background:#FFF; 
 
    margin:5px; 
 
    display: inline-block; 
 
}

<div id="c1" class="container"> 
 
    <div class="elem">Icon1</div> 
 
    <div class="elem">Icon2</div> 
 
    <div class="elem">Icon3</div> 
 
    <div class="elem">Icon4</div> 
 
    <div class="elem">Icon5</div> 
 
    <div class="elem">Icon6</div> 
 
</div> 
 
<div id="c2" class="container"></div> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/dragula/3.6.8/dragula.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/dragula/3.6.8/dragula.min.css" rel="stylesheet" 
 
     />