Dragula, sürüklenenden farklı bir öğe bırakıyor

Question

Dragula'da, bir kaptan diğerine potansiyel tek yönlü bir kopyanız var. Bunu, bir öğeyi bir kapsayıcıyı temsil eden bir simgeyi sürükleyerek bir kapsayıcıya sürüklediğiniz ve bunu oluşturduğunu belirten bir UI için kullanmak istiyorum. " Gerçek anlaşma "- gerçek bir anlaşma keyfi farklı bir unsur olmak. Bunun büyük kısmı

gerçekten kolaydı: Gördüğünüz gibi

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" 
 
     />

- bu bana istediğim sonucu veren damla üzerinde eleman yerine geçer. Ancak, sürükleme sırasında hayalet görüntü hala orijinal "Sembol" öğesidir.

"Bırakılacak" öğeyi sürüklemede değiştirmek mümkün mü, böylece hem hayalet hem de son sonuç gerekli öğe gibi görünüyor?

Answer 1

Sürüklenme sırasında art arda tetikleyen shadow olay var. Gölge elemanını değiştirmek için kullanabileceğimi düşündüm ama görünen o ki dragula ona bir referans veriyor, eğer kaldırırsam çalışmayı durduracak.

Bunun üstesinden gelmenin en temiz yolu, orijinal hayaleti display: none'a ayarlamak ve yanına başka bir tane koymak, ardından dragend üzerinde temizlemektir.

Gerçek ve sahte gölge öğesi arasındaki boyut farklılıklarının konumlandırmayı kesmesi konusunda hiçbir fikrim yok. Ben o köprüyü geçince ona geçeceğim.

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" 
 
     />