jQuery EasyUI drop - Création programme scolaire

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.

matières scolaires d'affichage

	<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>

Afficher la chronologie

	<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>

Faites glisser vers la gauche de matières scolaires

	$ ( '. .item Gauche »). Draggable ({
		revenir: true,
		proxy: 'clone'
	});

Les matières scolaires placés dans une cellule sur le calendrier

	$ ( '. 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 à.

Télécharger exemples jQuery EasyUI

jeasyui-dd-timetable.zip