Dragula拖拽一個不同於拖曳的元素

Question

在dragula中，你有一種潛在的從一個容器複製到另一個容器的方式 - 我想將它用於一個UI，在這裏你將代表一個元素的符號拖拽到一個容器中並讓它產生「真正的交易「 - 真正的交易是一個任意不同的元素。

絕大部分原因是很容易：

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