div要素へのドロップを防ぐにはどうすればよいですか？

Question

私はHTMLとJavaScriptを使ってドラッグアンドドロップシステムを作っています。私はドラッグアンドドープ作業（div要素）の列 "To Do"から "In Development"へ、またはその逆にします。私が持っている唯一の問題は、あなたが別のタスクにタスクをドラッグ＆ドロップすることができ、私はそうしないことです。

これが始まる状況です：

と、これはドラッグ＆ドロップした後、次のとおりです。

今、私は、ユーザーがタスク2をドラッグアンドドロップできることを防止しますどのように私はそれを行うことができますか？下に私のコードを見つけることができました。

ありがとうございます。

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のhasClass関数を使用して、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>