ड्रैगला

Question

ड्रैगला में एक अलग तत्व छोड़ने से ड्रैगुला में एक कंटेनर से दूसरे में एक संभावित तरीका है - मैं इसे यूआई के लिए उपयोग करना चाहता हूं जहां आप किसी तत्व को कंटेनर में प्रतिनिधित्व करने वाले प्रतीक को खींचते हैं और इसे " असली सौदा "- असली सौदा एक मनमाना अलग तत्व होने के नाते।

इसमें से अधिकांश वास्तव में आसान था:

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 पर सेट करना है और इसके आगे एक और डालना है, फिर इसे 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" 
 
     />