jqueryappend最前面(jquery最后一个子节点)

　　>

　　本教程将为你展示如何使用jQuery EasyUI创建一个学校的课程表。我们将创建两个表：学校的科目在左边，时间表在右边，你可以拖动学校科目并将其放在时间表的单元格中。学校的科目是一个"div class='item'"元素，然而时间表单元格是一个"td class='drop'"元素。

　　查看演示

　　显示学校科目

　　English

　　Science

　　显示时间表

　　Monday Tuesday Wednesday Thursday Friday

　　08:00

　　拖动左侧的学校科目

　　$('.left .item').draggable({ revert:true, proxy:'clone' });

　　将学校的科目放在时间表的单元格中

　　$('.right td.drop').droppable({ accept: '.item', 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 }); } } });

　　正如你所看到的代码一样，当用户在左侧拖动学校科目并将其放到时间表的单元格中时，onDrop回调函数将会被调用。我们将左侧拖动的源元素复制并把它附加到时间表单元格上，当把学校科目从时间表的某个单元格拖动到其他单元格时，只需简单地移动它即可。

　　下载该EasyUI示例：easyui-timetable-demo.zip

　　购买最新正版授权！"咨询在线客服"

　　0

　　有用(0)没用(0)

　　本站文章除注明转载外，均为本站原创或翻译

　　欢迎任何形式的转载，但请务必注明出处，尊重他人劳动成果

　　转载请注明：文章转载自：慧都控件网 [https://www.evget.com]

　　本文地址：https://www.evget.com/article/2015/10/9/22715.html