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

http://xueyuan.lanqiao.org

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

HTML代码：

1.

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

效果如下：

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

本文来源：蓝桥软件学院