jQuery-EasyUI基础教程之拖放的学校课程表

loading 分享 2026-7-25 下载文档

http://xueyuan.lanqiao.org

HTML代码：

2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. 23. 24. 25. 26. 27. 28. 29. 30. 31. 32. 33.

34.

35.

36. 37. http://xueyuan.lanqiao.org

38. 39. 40. 41. 42. 43. 44. 45. 46. 47. 48. 49. 50. 51. 52. 53. 54. 55. 56. 57. 58. 59. 60. 61. 62. 63. 64. 65. 66. 67. 68. 69. 70. 71. 72. 73. 74. 75. 76. 77. 78. 79. 80.

http://xueyuan.lanqiao.org

81. 82. 83. 84. 85. 86. 87. 88. 89. 90. 91. 92. 93. 94. 95. 96. 97. 98. 99. 100. 101. 102. 103. 104. 105. 106. 107. 108. 109. 110. 111. 112. 113. 114. 115. 116. 117. 118. 119. 120. 121. 122. 123.

http://xueyuan.lanqiao.org

124. 125. 126.

English

Science

Java

Math

JavaScript

Oracle

SpringMVC

MyBatis

Monday

Tuesday

Wednesday

Thursday

Friday

08:00-09:00

09:10-10:00

10:10-11:00

11:10-12:00

14:00-15:00

15:10-16:00

16:10-17:00

17:10-18:00

19:10-20:00

20:10-21:00

JS代码：

1. $(function() { 2. /** 3. * 设置可拖动 4. */ 5. $('.left .item').draggable({ 6. revert : true, 7. proxy : 'clone' 8. }); 9. /** 10. * 设置放置区 11. */ 12. $('.right td.drop').droppable({ 13. //在被拖拽元素到放置区内的时候触发 14. onDragEnter : function() { 15. $(this).addClass('over'); 16. }, 17. //在被拖拽元素经过放置区的时候触发 18. onDragLeave : function() { 19. $(this).removeClass('over'); 20. }, 21. //在被拖拽元素放入到放置区的时候触发 22. onDrop : function(e, source) { 23. $(this).removeClass('over'); 24. if ($(source).hasClass('assigned')) { 25. $(this).append(source); 26. } else { 27. var c = $(source).clone().addClass('assigned'); 28. $(this).empty().append(c); 29. c.draggable({ 30. revert : true 31. }); 32. } 33. } 34. }); 35. }); http://xueyuan.lanqiao.org

效果如下：

综上所述，便是可拖放的学校课程表。

本文来源：蓝桥软件学院

jQuery-EasyUI基础教程之拖放的学校课程表.doc 将本文的Word文档下载到电脑

下载这篇word文档