El mejor tutorial de jQuery EasyUI gota - La creación de planes de estudios en 2024. En este tutorial podrás aprender Descargar ejemplos de jQuery EasyUI,
Este tutorial le mostrará cómo crear un plan de estudios usando jQuery EasyUI. Vamos a crear dos tablas: las materias escolares que se muestran a la izquierda para visualizar el calendario de la derecha. Puede arrastrar y materias escolares colocado en la celda de horario. Materias de la escuela es un <div class = "elemento"> elemento, la célula es un calendario <td class = "soltar"> elemento.
<Div class = "left"> <Tabla> <Tr> <Td> <div class = "elemento"> Inglés </ div> </ td> </ Tr> <Tr> <Td> <div class = "elemento"> Ciencia </ div> </ td> </ Tr> <! - -> Otros temas </ Table> </ Div>
<Div class = "right"> <Tabla> <Tr> <Td class = "blank"> </ td> <Td class = "titulo"> Lunes </ td> <Td class = "titulo"> Martes </ td> <Td class = "titulo"> Miércoles </ td> <Td class = "titulo"> Jueves </ td> <Td class = "titulo"> Viernes </ td> </ Tr> <Tr> <Td class = "tiempo"> 08:00 </ td> <Td class = "soltar"> </ td> <Td class = "soltar"> </ td> <Td class = "soltar"> </ td> <Td class = "soltar"> </ td> <Td class = "soltar"> </ td> </ Tr> <! - -> Otras células </ Table> </ Div>
$ ( '. .item Izquierda'). Arrastrable ({ revertirá: true, Proxy: 'clon' });
$ ( '. Td.drop derecho'). Soltable ({ OnDragEnter: function () { $ (Este) .addClass ( "más"); }, OnDragLeave: function () { $ (Este) .removeClass ( "más"); }, OnDrop: function (e, fuente) { $ (Este) .removeClass ( "más"); if ($ (fuente) .hasClass ( 'asignado')) { $ (Este) .Append (fuente); } Else { var c = $ (fuente) .clone () addClass ( 'asignado') .; $ (Este) .empty append () (c) .; c.draggable ({ revertirá: true }); } } });
Como se puede ver en el código anterior, cuando un usuario arrastra en el lado izquierdo de las materias de la escuela y se coloca en una celda en el calendario, se llama la función de devolución de llamada OnDrop. Hemos clonado el elemento de origen de arrastre desde el lado izquierdo y adjuntarlo a la célula horario. Cuando se arrastran desde el horario de materia escolar una celda a otra celda, sólo tiene que moverlo.