前端JS拖拽页面元素

前端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>

标签：newParent,target,JS,previousElementSibling,id,ev,data,拖拽,页面
来源： https://www.cnblogs.com/DongJiaxin/p/11320667.html