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

最新推荐文章于 2022-11-24 10:36:22 发布

游走走

最新推荐文章于 2022-11-24 10:36:22 发布

阅读量1.4k

点赞数

分类专栏：学习笔记 web

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/qq_24734285/article/details/51519869

版权

学习笔记同时被 2 个专栏收录

108 篇文章 0 订阅

订阅专栏

web

93 篇文章 1 订阅

订阅专栏

<!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" οndrοp="drop(event)" οndragοver="allowDrop(event)"></td>
        <td id="td12" οndrοp="drop(event)" οndragοver="allowDrop(event)"></td>
        <td id="td13" οndrοp="drop(event)" οndragοver="allowDrop(event)"></td>
        <td id="td14" οndrοp="drop(event)" οndragοver="allowDrop(event)"></td>
        <td id="td15" οndrοp="drop(event)" οndragοver="allowDrop(event)"></td>
        <td id="td16" οndrοp="drop(event)" οndragοver="allowDrop(event)"></td>
        <td id="td17" οndrοp="drop(event)" οndragοver="allowDrop(event)"></td>
    </tr>
    <tr>
        <td id="td21" οndrοp="drop(event)" οndragοver="allowDrop(event)"></td>
        <td id="td22" οndrοp="drop(event)" οndragοver="allowDrop(event)"></td>
        <td id="td23" οndrοp="drop(event)" οndragοver="allowDrop(event)"></td>
        <td id="td24" οndrοp="drop(event)" οndragοver="allowDrop(event)"></td>
        <td id="td25" οndrοp="drop(event)" οndragοver="allowDrop(event)"></td>
        <td id="td26" οndrοp="drop(event)" οndragοver="allowDrop(event)"></td>
        <td id="td27" οndrοp="drop(event)" οndragοver="allowDrop(event)"></td>
    </tr>
    <tr>
        <td id="td31" οndrοp="drop(event)" οndragοver="allowDrop(event)"></td>
        <td id="td32" οndrοp="drop(event)" οndragοver="allowDrop(event)"></td>
        <td id="td33" οndrοp="drop(event)" οndragοver="allowDrop(event)"></td>
        <td id="td34" οndrοp="drop(event)" οndragοver="allowDrop(event)"></td>
        <td id="td35" οndrοp="drop(event)" οndragοver="allowDrop(event)"></td>
        <td id="td36" οndrοp="drop(event)" οndragοver="allowDrop(event)"></td>
        <td id="td37" οndrοp="drop(event)" οndragοver="allowDrop(event)"></td>
    </tr>
</table>
同学们：
<div id="div3" οndrοp="drop(event)" οndragοver="allowDrop(event)"
     style="border:1px solid #ccc;width:50px;height:150px;">
    <label id="drag1" draggable="true" οndragstart="drag(event)">张三</label>
    <label id="drag2" draggable="true" οndragstart="drag(event)">李四</label>
    <label id="drag3" draggable="true" οndragstart="drag(event)">王五</label>
    <label id="drag4" draggable="true" οndragstart="drag(event)">赵六</label>
    <label id="drag5" draggable="true" οndragstart="drag(event)">柳七</label>
    <label id="drag6" draggable="true" οndragstart="drag(event)">周八</label>
    <label id="drag7" draggable="true" οndragstart="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
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
#学习笔记#(63)拖拽HTML5-drag-drop座位表

td{ border: 1px solid #ccc; width:50px; height: 30px; text-align: center; } label{ width:50px; display: block;
复制链接

扫一扫