Le meilleur didacticiel jQuery EasyUI drop - Création programme scolaire en 2024, dans ce didacticiel, vous pouvez apprendre Télécharger exemples jQuery EasyUI,
Ce tutoriel va vous montrer comment créer un programme scolaire en utilisant jQuery EasyUI. Nous allons créer deux tables: matières scolaires affichées sur la gauche pour afficher le calendrier sur la droite. Vous pouvez faire glisser et les matières scolaires placé sur la cellule de planification. Les matières scolaires est un <div class "item" => élément, la cellule est un calendrier <td class = "drop"> élément.
<Class Div = "left"> <Table> <Tr> <Td> <div class = "item"> English </ div> </ td> </ Tr> <Tr> <Td> <div class = "item"> Science </ div> </ td> </ Tr> <! - Autres sujets -> </ Table> </ Div>
<Div class = "right"> <Table> <Tr> <Td class = "blank"> </ td> <Td class = "title"> Lundi </ td> <Td class = "title"> Mardi </ td> <Td class = "title"> Mercredi </ td> <Td class = "title"> Jeudi </ td> <Td class = "title"> Vendredi </ td> </ Tr> <Tr> <Td class = "time"> 08:00 </ td> <Td class = "drop"> </ td> <Td class = "drop"> </ td> <Td class = "drop"> </ td> <Td class = "drop"> </ td> <Td class = "drop"> </ td> </ Tr> <! - D'autres cellules -> </ Table> </ Div>
$ ( '. .item Gauche »). Draggable ({ revenir: true, proxy: 'clone' });
$ ( '. Td.drop Right'). Déposable ({ OnDragEnter: function () { $ (Ce) .addClass ( 'over'); }, OnDragLeave: function () { $ (Ce) .removeClass ( 'over'); }, onDrop: function (e, source) { $ (Ce) .removeClass ( 'over'); if ($ (source) .hasClass ( 'affecté')) { $ (Ce) .append (source); } Else { var c = $ (source) .clone () addClass ( 'affecté') .; $ (Ce) .empty () append (c) .; c.draggable ({ revenir: true }); } } });
Comme vous pouvez le voir dans le code ci-dessus, lorsqu'un utilisateur fait glisser sur le côté gauche des matières scolaires et placé dans une cellule dans le calendrier, la fonction de rappel onDrop sera appelée. Nous avons cloné l'élément de source de glissement sur le côté gauche et le joindre à la cellule de planification. Lors du glissement de l'horaire matière scolaire d'une cellule à une autre, il suffit de déplacer à.