<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI 放置(Droppable)</title> <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css"> <style> ul { list-style-type: none; margin: 0; padding: 0; margin-bottom: 10px; } li { margin: 5px; padding: 5px; width: 150px; } #cart td{width: 200px;height: 30px;} .close{ right: -21px; float: right; cursor: hand; cursor: pointer; margin-top: -6px; margin-right: -1px; } </style> <script> $(function() { //$( "ul, li" ).disableSelection(); $("#draggable1,#draggable2 ").draggable({ connectToSortable: "#cart td.container", helper: "clone", revert: "invalid" }); $("#cart td.container").droppable({ drop: function(event, ui) { var liE = $(this).find("li"); if(liE.length > 0){ liE.remove(); } var content = '<a class="close">×</a>'+ui.draggable.text().replace(/×| /g,''); $("<li></li>").draggable({ appendTo: "body", helper: "clone" }).html(content).addClass('ui-state-highlight ui-draggable ').css('list-style-type','none').appendTo(this); $(this).find("li a.close").click(function(){ $(this).closest('li').remove(); }); } }); }); </script> </head> <body> <ul> <li id="draggable1" class="ui-state-highlight"> 班次一</li> <li id="draggable2" class="ui-state-highlight">班次二</li> </ul> <div id="cart"> <table class="ui-widget-content" border="1px;"> <thead> <tr> <td colspan="7">排班信息</td> </tr> </thead> <tbody> <tr> <td> 2017/1/18 </td> <td class="container"> </td> <td class="container"> </td> <td class="container"> </td> <td class="container"> </td> <td class="container"> </td> <td> </td> </tr> <tr> <td> 2017/1/19 </td> <td class="container"> </td > <td class="container"> </td> <td class="container"> </td> <td class="container"> </td> <td class="container"> </td> <td class="container"> </td> </tr> <tr> <td> 2017/1/20 </td> <td class="container"> </td> <td class="container"> </td> <td class="container"> </td> <td class="container"> </td> <td class="container"> </td> <td class="container"> </td> </tr> <tr> <td> 2017/1/21 </td> <td class="container"> </td> <td class="container"> </td> <td class="container"> </td> <td class="container"> </td> <td class="container"> </td> <td class="container"> </td> </tr> <tr> <td> 2017/1/22 </td> <td class="container"> </td> <td class="container"> </td> <td class="container"> </td> <td class="container"> </td> <td class="container"> </td> <td class="container"> </td> </tr> <tr> <td> </td> <td> 用户1 </td> <td> 用户2 </td> <td> 用户3 </td> <td> 用户4 </td> <td> 用户5 </td> <td> 用户6 </td> </tr> </tbody> </table> </div> </body> </html>
拖拽-排班
猜你喜欢
转载自fkshl.iteye.com/blog/2353874
今日推荐
周排行