easyui学习记录6-课程表拖拽

效果图

easyui学习记录6-课程表拖拽_第1张图片

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../jq/jquery.min.js"></script>
    <script src="../jq/jquery.easyui.min.js"></script>
    <link rel="stylesheet" href="../themes/default/easyui.css" />
    <link rel="stylesheet" href="../themes/icon.css" />
    <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/demo/demo.css">
    <script src="../jq/easyui-lang-zh_CN.js"></script>
    <style>
        .left {
            width: 120px;
            float: left;
        }

        .left table {
            background: #E0ECFF;
        }

        .left td {
            background: #eee;
        }

        .right {
            float: left;
            width: 570px;
        }

        .right table {
            background: #E0ECFF;
            width: 100%;
        }

        .right td {
            background: #fafafa;
            color: #444;
            text-align: center;
            padding: 2px;
        }

        .right td {
            background: #E0ECFF;
        }

        .right td.drop {
            background: #fafafa;
            width: 100px;
        }

        .right td.over {
            background: #FBEC88;
        }

        .item {
            text-align: center;
            border: 1px solid #499B33;
            background: #fafafa;
            color: #444;
            width: 100px;
        }

        .assigned {
            border: 1px solid #BC2A4D;
        }

        .trash {
            background-color: red;
        }
    </style>
</head>

<body>
    <div class="left">
        <table>
            <tr>
                <td>
                    <div class="item">English</div>
                </td>
            </tr>
            <tr>
                <td>
                    <div class="item">Science</div>
                </td>
            </tr>
            <!-- other subjects -->
        </table>
    </div>
    <div class="right">
        <table>
            <tr>
                <td class="blank"></td>
                <td class="title">Monday</td>
                <td class="title">Tuesday</td>
                <td class="title">Wednesday</td>
                <td class="title">Thursday</td>
                <td class="title">Friday</td>
            </tr>
            <tr>
                <td class="time">08:00</td>
                <td class="drop"></td>
                <td class="drop"></td>
                <td class="drop"></td>
                <td class="drop"></td>
                <td class="drop"></td>
            </tr>
            <tr>
                <td class="time">09:00</td>
                <td class="drop"></td>
                <td class="drop"></td>
                <td class="drop"></td>
                <td class="drop"></td>
                <td class="drop"></td>
            </tr>
            <tr>
                <td class="time">10:00</td>
                <td class="drop"></td>
                <td class="drop"></td>
                <td class="drop"></td>
                <td class="drop"></td>
                <td class="drop"></td>
            </tr>
            <tr>
                <td class="time">11:00</td>
                <td class="drop"></td>
                <td class="drop"></td>
                <td class="drop"></td>
                <td class="drop"></td>
                <td class="drop"></td>
            </tr>
            <!-- other cells -->
        </table>
    </div>
    <script>
        $('.left .item').draggable({
            revert: true,//当元素拖拽结束后,元素回到原来的位置。 
            proxy: 'clone'//克隆元素
        });
        $('.right td.drop').droppable({
            onDragEnter: function () {//当被鼠标拖动的对象进入其容器范围内时触发此事件
                $(this).addClass('over');//进入到表格,添加一个黄色的背景色
            },
            onDragLeave: function () {//当被鼠标拖动的对象离开其容器范围内时触发此事件
                $(this).removeClass('over');//离开表格,移除黄色背景色
            },
            onDrop: function (e, source) {//释放鼠标键时触发此事件 source指克隆下来的这个div
                $(this).removeClass('over');//将块放下是,先移除黄色背景色
                if ($(source).hasClass('assigned')) {//元素是否包含assigned这个class 包含就直接把元素加入进来
                    $(this).append(source);
                } else {//不包含就添加assigned这个class,
                    var c = $(source).clone().addClass('assigned');
                    $(this).empty().append(c);//empty元素移除所有内容,包括所有文本和子节点,然后将克隆的元素append进来
                    c.draggable({
                        revert: true//当元素拖拽结束后,元素回到原来的位置。 
                    });
                }
            }
        });
    </script>
</body>

</html>

你可能感兴趣的:(easyui)