zoukankan      html  css  js  c++  java
  • 表格单元格间数据的拖拽

    <!DOCTYPE HTML>
    <html>
    <style>
        td{
            border:1px solid #444;
            padding:20px;
            width:100px;
            height:50px;
        }
        td div{
            cursor:pointer;
        }
        table{
           
        }
    </style>
     
    <script type="text/javascript">
    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));
    }
    </script>
    <body>
            <p>asldflasl</p>
        <table>
            <tr>
                <th>
                a
                </th><th>
    b
    </th><th>
    c
    </th><th>
    d
    </th><th>
       e
    </th>
            </tr>
            <tr>
                <td class="mytd" ondrop="drop(event)" ondragover="allowDrop(event)">
                    <div id="div1" class="tablediv" draggable="true" ondragstart="drag(event)" >1111111</div>
                </td>
                <td class="mytd" ondrop="drop(event)" ondragover="allowDrop(event)">
                    <div id="div2" class="tablediv" draggable="true" ondragstart="drag(event)" >2222222</div>
                </td>
                <td class="mytd" ondrop="drop(event)" ondragover="allowDrop(event)">
                    <div id="div3" class="tablediv" draggable="true" ondragstart="drag(event)" >333333333</div>
                </td>
                <td class="mytd" ondrop="drop(event)" ondragover="allowDrop(event)">
                    <div id="div4" class="tablediv" draggable="true" ondragstart="drag(event)" >4444444444</div>
                </td>
                <td>
                    <div class="tablediv">555555555555</div>
                </td>
            </tr>
        </table>
    
    
    </body>
    </html>
  • 相关阅读:
    MIKROTIK ROS+PHP+MYSQL实现从数据库中配置DNS服务器
    随手记
    05 通过python开启静态http服务
    名称空间和作用域
    cs常用功能
    初识Cobalt Strike
    msf之手机木马生成&利用
    msf之meterpreter命令
    BURPSUITE的常用模块
    BURPSUITE专业汉化版安装
  • 原文地址:https://www.cnblogs.com/lunawzh/p/4888625.html
Copyright © 2011-2022 走看看