Dragulaはあなたが別のコンテナからの潜在的な一方通行のコピーを持ってdragulaで

Question

をドラッグとは異なる要素をドロップ - 私はあなたがコンテナに要素を表すシンボルをドラッグすると、それは "を生む持つ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イベントがあります。私はシャドウ要素を置き換えるためにそれを使うことができると思ったが、ドラッグラがそれを参照しているように見えるので、削除すれば動作を停止する。

これを回避する最も簡単な方法は、元のゴーストをdisplay: noneに設定し、もう1つを隣に置いてから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" 
 
     />