前端JS拖拽组件
代码如下:
function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { //alert(ev.target.parentNode.previousElementSibling.id); ev.dataTransfer.setData("Text",ev.target.id); } function drop(ev) { ev.preventDefault(); var data=ev.dataTransfer.getData("Text"); //debugger; var newParent = ""; if (ev.target.className === "btn btn-info") { ev.target.parentNode.appendChild(document.getElementById(data)); //alert(ev.target.parentNode.previousElementSibling.textContent); newParent = ev.target.parentNode.previousElementSibling.id; } else { ev.target.appendChild(document.getElementById(data)); //alert(ev.target.previousElementSibling.textContent); newParent = ev.target.previousElementSibling.id; } //alert("拖动数据:"+data+" 目标区域:"+newParent); //updateExaminerMessage(data, newParent); }
html页面
<table class="gridtable" style="width: 100%;"> <thead> <tr> <th style="width: 20%;">考场</th> <th>志愿者</th> </tr> </thead> <tbody> <tr> <td>1考场</td> <td id="div6" ondrop="drop(event)" ondragover="allowDrop(event)"> <c:forEach begin="1" end="5" var="count"> <button id="drag6${count}" draggable="true" ondragstart="drag(event)" class="btn btn-info">志愿者6${count}</button> </c:forEach> </td> </tr> <tr> <td>2考场</td> <td id="div7" ondrop="drop(event)" ondragover="allowDrop(event)"> <c:forEach begin="1" end="6" var="count"> <button id="drag7${count}" draggable="true" ondragstart="drag(event)" class="btn btn-info">志愿者7${count}</button> </c:forEach> </td> </tr> </tbody> </table>