jQuery EasyUI drop - Criando currículo escolar
Este tutorial irá mostrar-lhe como criar um currículo escolar usando jQuery EasyUI. Vamos criar duas tabelas: disciplinas escolares exibidas à esquerda para exibir a programação à direita. Você pode arrastar e disciplinas escolares colocada na célula de programação. disciplinas escolares é um <div class = "item"> elemento, a célula é um calendário <td class = "drop"> elemento.
disciplinas escolares exibição
<Div class = "left"> <Table> <Tr> <Td> <div class = "item"> Inglês </ div> </ td> </ Tr> <Tr> <Td> <div class = "item"> Science </ div> </ td> </ Tr> <! - Outros temas -> </ Table> </ Div>
Mostrar Timeline
<Div class = "right"> <Table> <Tr> <Td class = "blank"> </ td> <Td class = "title"> Segunda-feira </ td> <Td class = "title"> Terça-feira </ td> <Td class = "title"> Quarta-feira </ td> <Td class = "title"> Quinta-feira </ td> <Td class = "title"> Sexta-feira </ td> </ Tr> <Tr> <Td class = "tempo"> 08:00 </ td> <Td class = "drop"> </ td> <Td class = "drop"> </ td> <Td class = "drop"> </ td> <Td class = "drop"> </ td> <Td class = "drop"> </ td> </ Tr> <! - Outras células -> </ Table> </ Div>
Arraste para a esquerda das disciplinas escolares
$ ( '. .item Esquerda'). Draggable ({ revertem: true, proxy: 'clone' });
disciplinas escolares colocados em uma célula em calendário
$ ( '. Td.drop Right'). Droppable ({ OnDragEnter: function () { $ (Este) .addClass ( 'over'); }, OnDragLeave: function () { $ (Este) .removeClass ( 'over'); }, onDrop: function (e, de origem) { $ (Este) .removeClass ( 'over'); if ($ (fonte) .hasClass ( 'atribuído')) { $ (Este) .append (fonte); } Else { var c = $ (fonte) .clone () addClass ( 'atribuído') .; $ (Este) .empty () append (c) .; c.draggable ({ revertem: true }); } } });
Como você pode ver no código acima, quando um usuário arrasta no lado esquerdo das disciplinas escolares e colocado numa cela no calendário, função de retorno onDrop será chamado. Nós clonado o elemento de origem de arrastar do lado esquerdo e anexá-lo para a célula de programação. Quando arrastado do cronograma da disciplina escolar de uma célula para outra célula, basta movê-lo.