#学习笔记#(63)拖拽HTML5-drag-drop座位表

来源：互联网发布：足彩单式出票软件编辑：程序博客网时间：2024/06/05 10:47
<!DOCTYPE HTML><html><head>    <style rel="stylesheet">        td{            border: 1px solid #ccc;            width:50px;            height: 30px;            text-align: center;        }        label{            width:50px;            display: block;            text-align: center;        }    </style></head><body><table>    <tr>        <td id="td11" ondrop="drop(event)" ondragover="allowDrop(event)"></td>        <td id="td12" ondrop="drop(event)" ondragover="allowDrop(event)"></td>        <td id="td13" ondrop="drop(event)" ondragover="allowDrop(event)"></td>        <td id="td14" ondrop="drop(event)" ondragover="allowDrop(event)"></td>        <td id="td15" ondrop="drop(event)" ondragover="allowDrop(event)"></td>        <td id="td16" ondrop="drop(event)" ondragover="allowDrop(event)"></td>        <td id="td17" ondrop="drop(event)" ondragover="allowDrop(event)"></td>    </tr>    <tr>        <td id="td21" ondrop="drop(event)" ondragover="allowDrop(event)"></td>        <td id="td22" ondrop="drop(event)" ondragover="allowDrop(event)"></td>        <td id="td23" ondrop="drop(event)" ondragover="allowDrop(event)"></td>        <td id="td24" ondrop="drop(event)" ondragover="allowDrop(event)"></td>        <td id="td25" ondrop="drop(event)" ondragover="allowDrop(event)"></td>        <td id="td26" ondrop="drop(event)" ondragover="allowDrop(event)"></td>        <td id="td27" ondrop="drop(event)" ondragover="allowDrop(event)"></td>    </tr>    <tr>        <td id="td31" ondrop="drop(event)" ondragover="allowDrop(event)"></td>        <td id="td32" ondrop="drop(event)" ondragover="allowDrop(event)"></td>        <td id="td33" ondrop="drop(event)" ondragover="allowDrop(event)"></td>        <td id="td34" ondrop="drop(event)" ondragover="allowDrop(event)"></td>        <td id="td35" ondrop="drop(event)" ondragover="allowDrop(event)"></td>        <td id="td36" ondrop="drop(event)" ondragover="allowDrop(event)"></td>        <td id="td37" ondrop="drop(event)" ondragover="allowDrop(event)"></td>    </tr></table>同学们：<div id="div3" ondrop="drop(event)" ondragover="allowDrop(event)"     style="border:1px solid #ccc;width:50px;height:150px;">    <label id="drag1" draggable="true" ondragstart="drag(event)">张三</label>    <label id="drag2" draggable="true" ondragstart="drag(event)">李四</label>    <label id="drag3" draggable="true" ondragstart="drag(event)">王五</label>    <label id="drag4" draggable="true" ondragstart="drag(event)">赵六</label>    <label id="drag5" draggable="true" ondragstart="drag(event)">柳七</label>    <label id="drag6" draggable="true" ondragstart="drag(event)">周八</label>    <label id="drag7" draggable="true" ondragstart="drag(event)">孙九</label></div><script>    function allowDrop(ev) {//ev是该对象的事件        ev.preventDefault();//禁止浏览器自动打开新页面的行为    }    function drag(ev) {        ev.dataTransfer.setData("Text", ev.target.id);//拖动数据    }    function drop(ev) {        ev.preventDefault();        var data = ev.dataTransfer.getData("Text");//接收数据 /*       console.log("做个正则",/td/.test(String(ev.target.id)));*/        if (ev.target.id != "div3" && /td/.test(String(ev.target.id))) {            console.log(document.getElementById(ev.target.id).children.length);            if (ev.target.children.length >= 1) {                alert("已占座1！");            } else {                ev.target.appendChild(document.getElementById(data));//将该数据添加到新容器中            }        }else if(ev.target.id != "div3" && !/td/.test(String(ev.target.id))){            alert("已占座2！");        } else{            ev.target.appendChild(document.getElementById(data));//将该数据添加到新容器中        }        console.log(data);//名字        console.log("ev.target.id",ev.target.id);//座位    }</script></body></html>
0 0