<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>拖动课程表</title> <link rel="stylesheet" type="text/css" href="js/jquery-easyui/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="js/jquery-easyui/themes/icon.css"> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> <script src="js/jquery.min.js"></script> <script type="text/javascript" src="js/jquery-easyui/jquery.easyui.min.js"></script> <script type="text/javascript" src="js/bootstrap.min.js"></script> <script> $(document).ready(function(){ //拖动左边的课程 $(‘.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){ $(this).removeClass(‘over‘); if ($(source).hasClass(‘assigned‘)){ $(this).append(source); } else { var c = $(source).clone().addClass(‘assigned‘); $(this).empty().append(c); c.draggable({ revert:true }); } } }); }) </script> <style> .left{ float: left; margin-left: 300px; background-color:#4b72a4; color: #fff; } .left td{ border: 1px solid #000000; }
.right{ margin: 100px 400px; background-color: #b3b3b3; color: #fff; } .item{ margin-bottom: 10px; } </style></head><body><div class="left"> <table class="t1"> <tr> <td><div class="item">英语</div></td> </tr> <tr> <td><div class="item">数学</div></td> </tr> <tr> <td><div class="item">体育</div></td> </tr> <tr> <td><div class="item">政治</div></td> </tr> <tr> <td><div class="item">历史</div></td> </tr> <tr> <td><div class="item">地理</div></td> </tr>
</table></div>
<div class="right"> <table class="table table-bordered"> <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> <tr> <td class="time">14:00</td> <td class="drop"></td> <td class="drop"></td> <td class="drop"></td> <td class="drop"></td> <td class="drop"></td> </tr> </table></div></body></html>
原文地址：https://www.cnblogs.com/LindaBlog/p/9223850.html
时间： 2024-10-18 22:31:19