एक div तत्व में ड्रॉप को रोकने के लिए कैसे?

Question

मैं HTML और जावास्क्रिप्ट के साथ एक ड्रैग और ड्रॉप सिस्टम बना रहा हूं। मैं कॉल टू "टू डू" से "विकास में" और इसके विपरीत एक कार्य (div तत्व) खींच और खींच दूंगा। मुझे मिली एकमात्र समस्या यह है कि आप किसी कार्य को किसी अन्य कार्य में खींच और छोड़ सकते हैं और मैं नहीं करूँगा।

यह स्थिति शुरू होता है:

और यह एक खींचें और ड्रॉप के बाद है:

अब मैं और रोक देंगे उपयोगकर्ताओं को खींच सकता है कि ड्रॉप कार्य 2 कार्य में 1. मैं यह कैसे कर सकता हूं? नीचे आप मेरा कोड पा सकते हैं।

अग्रिम धन्यवाद।

function allowDrop(ev) { 
 
    ev.preventDefault(); 
 
} 
 

 
function drag(ev) { 
 
    ev.dataTransfer.setData("text", ev.target.id); 
 
} 
 

 
function drop(ev) { 
 
    ev.preventDefault(); 
 
    var data = ev.dataTransfer.getData("text"); 
 
    ev.target.appendChild(document.getElementById(data)); 
 
}

table { 
 
    font-family: "Segoe UI", sans-serif; 
 
    border-collapse: collapse; 
 
} 
 
table, 
 
th, 
 
td { 
 
    border: 1px solid gray; 
 
    padding: 10px; 
 
} 
 
th { 
 
    background-color: lightgray; 
 
} 
 
th, 
 
td { 
 
    width: 33.33%; 
 
} 
 
td { 
 
    min-height: 80px; 
 
} 
 
.post-it { 
 
    background-color: yellow; 
 
    padding: 10px 5px; 
 
    margin: 5px; 
 
    margin-bottom: 20px; 
 
    box-shadow: 5px 5px 5px gray; 
 
    border: 1px black solid; 
 
} 
 
.post-it h4 { 
 
    text-align: center; 
 
    margin: 0; 
 
}

<table> 
 
    <tr> 
 
    <th>To Do</th> 
 
    <th>In Development</th> 
 
    <th>Done</th> 
 
    </tr> 
 

 
    <tr> 
 

 
    <td id="todo" ondrop="drop(event)" ondragover="allowDrop(event)"> 
 

 
     <div id="task1" class="post-it" draggable="true" ondragstart="drag(event)"> 
 
     <h4 draggable="false">Task 1</h4> 
 
     <p draggable="false">Lorem ipsum dolor sit amet</p> 
 
     </div> 
 

 
     <div id="task2" class="post-it" draggable="true" ondragstart="drag(event)"> 
 
     <h4 draggable="false">Task 2</h4> 
 
     <p draggable="false">Irish skinny, grinder affogato</p> 
 
     </div> 
 

 
    </td> 
 

 
    <td id="indev" ondrop="drop(event)" ondragover="allowDrop(event)"></td> 
 
    <td id="done" ondrop="drop(event)" ondragover="allowDrop(event)"></td> 
 
    </tr> 
 
</table>

Answer 1

के बाद वाले यह div के लिए एक "noDrop" वर्ग को जोड़ने और फिर उस वर्ग के लिए एक परीक्षण के साथ अपने ड्रॉप समारोह को अपडेट करके इस समस्या का समाधान कर सकते हैं। निम्नलिखित jQuery jQuery हैक्लास फ़ंक्शन का उपयोग करके परीक्षण करने के लिए jQuery का उपयोग करता है।

function drop(ev) { 
 
    var _target = $("#" + ev.target.id); 
 
    var data = ev.dataTransfer.getData("text"); 
 
    if ($(_target).hasClass("noDrop")) { 
 
    console.log("no transfer"); 
 
    ev.preventDefault(); 
 
    } else { 
 
    ev.preventDefault(); 
 
    ev.target.appendChild(document.getElementById(data)); 
 
    } 
 
}

table { 
 
    font-family: "Segoe UI", sans-serif; 
 
    border-collapse: collapse; 
 
} 
 
table, 
 
th, 
 
td { 
 
    border: 1px solid gray; 
 
    padding: 10px; 
 
} 
 
th { 
 
    background-color: lightgray; 
 
} 
 
th, 
 
td { 
 
    width: 33.33%; 
 
} 
 
td { 
 
    min-height: 80px; 
 
} 
 
.post-it { 
 
    background-color: yellow; 
 
    padding: 10px 5px; 
 
    margin: 5px; 
 
    margin-bottom: 20px; 
 
    box-shadow: 5px 5px 5px gray; 
 
    border: 1px black solid; 
 
} 
 
.post-it h4 { 
 
    text-align: center; 
 
    margin: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tr> 
 
    <th>To Do</th> 
 
    <th>In Development</th> 
 
    <th>Done</th> 
 
    </tr> 
 

 
    <tr> 
 

 
    <td id="todo" ondrop="drop(event)" ondragover="allowDrop(event)"> 
 

 
     <div id="task1" class="post-it noDrop" draggable="true" ondragstart="drag(event)"> 
 
     <h4 draggable="false">Task 1</h4> 
 
     <p>Lorem ipsum dolor sit amet</p> 
 
     </div> 
 

 
     <div id="task2" class="post-it noDrop" draggable="true" droppab ondragstart="drag(event)"> 
 
     <h4 draggable="false">Task 2</h4> 
 
     <p>Irish skinny, grinder affogato</p> 
 
     </div> 
 

 
    </td> 
 

 
    <td id="indev" ondrop="drop(event)" ondragover="allowDrop(event)"></td> 
 
    <td id="done" ondrop="drop(event)" ondragover="allowDrop(event)"></td> 
 
    </tr> 
 
</table>