HTML5拖拽表格中单元格间的数据库

最新推荐文章于 2021-06-11 12:33:56 发布

weixin_33714884

最新推荐文章于 2021-06-11 12:33:56 发布

阅读量155

点赞数

文章标签：数据库 javascript ViewUI

原文链接：http://www.cnblogs.com/lunawzh/p/4889726.html

版权

效果图：

代码：

<!DOCTYPE HTML>
<html>
<head>
    <script src="jquery-min.js"></script>
    <style>
    td{
        width:100px;
        height:80px;
        border:1px solid #444;
        cursor:pointer;
    }
    div{
        background:#0094ff;
        padding:5px;
        border:1px solid #444;
    }
    </style>

    <script type="text/javascript">
        $(function () {
            $("div").each(function () {
                this.draggable = true;
                this.ondragstart = function (e) {
                    e.dataTransfer.setData("id", e.target.id);
                };
                this.ondragend = function (e) {
                    $("td").css("background","");
                }
            })

            $("td").each(function () {
                this.ondragenter = function (e) {
                    $(this).css("background", "yellow");
                }
                this.ondragover = function (e) {
                    e.preventDefault();
                }
                this.ondragleave = function (e) {
                    $(this).css("background", "");
                }
                this.ondrop = function (e) {
                    e.preventDefault();
                    $(this).append($(document.getElementById(e.dataTransfer.getData("id"))));
                }
                
            })
        })
    </script>
</head>
<body>
       
    <table>
        <tr>
            <td>
                <div id="div1">1111111111</div>
            </td>
            <td>
                <div id="div2">222222222</div>
            </td>
            <td>
                <div id="div3">3333333333</div>
            </td>
            <td>
                <div id="div4">44444444444</div>
            </td>
        </tr>
    </table>

</body>
</html>