Dragula, отбрасывающий другой элемент, чем перетаскиваемый

Question

В dragula у вас есть потенциальная копия в одном направлении из одного контейнера в другой - я хочу использовать это для пользовательского интерфейса, где вы перетаскиваете символ, представляющий элемент в контейнер, и создайте его, Реальная сделка "- реальная сделка является произвольным другим элементом.

Большинство это было очень легко:

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

Как вы можете видеть - это заменяет элемент на капли, давая мне результат я хочу. Однако призрачное изображение при перетаскивании по-прежнему является оригинальным элементом «Символ».

Возможно ли заменить элемент «Отбросить» на перетаскивание, чтобы как призрак, так и конечный результат выглядели как необходимый элемент?

Answer 1

Событие shadow, которое многократно срабатывает при перетаскивании. Я думал, что смогу использовать его, чтобы заменить теневой элемент, но, похоже, dragula сохраняет ссылку на него, поэтому, если я его удалю, он перестанет работать.

По-видимому, самый чистый способ обойти это - установить исходный призрак на display: none и поставить рядом с ним еще один, а затем очистить его на dragend.

Я понятия не имею, будут ли различия в размерах между реальным и поддельным теневым элементом сломать позиционирование. Я перейду через этот мост, когда я доберусь до него.

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