jQuery EasyUI drop - Creazione programma scolastico

Questo tutorial vi mostrerà come creare un curriculum scolastico utilizzando jQuery EasyUI. Creeremo due tabelle: materie scolastiche visualizzati a sinistra per visualizzare il calendario sulla destra. È possibile trascinare e materie scolastiche posizionato sulla cella programma. materie scolastiche è un <div class = "oggetto"> elemento, la cella è un calendario <td class = "drop"> elemento.

materie scolastiche display

	<Div class = "left">
		<Table>
			<Tr>
				<Td> <div class = "oggetto"> English </ div> </ td>
			</ Tr>
			<Tr>
				<Td> <div class = "oggetto"> Scienza </ div> </ td>
			</ Tr>
			<! - Altri soggetti ->
		</ Table>
	</ Div>

Mostra la linea temporale

	<Div class = "right">
		<Table>
			<Tr>
				<Td class = "blank"> </ td>
				<Td class = "title"> Lunedi </ td>
				<Td class = "title"> Martedì </ td>
				<Td class = "title"> Mercoledì </ td>
				<Td class = "title"> Giovedi </ td>
				<Td class = "title"> Venerdì </ 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>
			<! - -> Altre cellule
		</ Table>
	</ Div>

Trascinare a sinistra di materie scolastiche

	$ ( '. .item Sinistra'). Draggable ({
		tornare: è vero,
		delega: 'clone'
	});

materie scolastiche collocati in una cella in calendario

	$ ( '. Td.drop Destra'). Droppable ({
		OnDragEnter: function () {
			$ (This) .addClass ( 'over');
		},
		onDragLeave: function () {
			$ (This) .removeClass ( 'over');
		},
		onDrop: la funzione (e, sorgente) {
			$ (This) .removeClass ( 'over');
			if ($ (fonte) .hasClass ( 'assegnato')) {
				$ (This) .Append (fonte);
			} Else {
				var c = $ (fonte) .clone () addClass ( 'assegnato') .;
				$ (This) .empty () append (c) .;
				c.draggable ({
					tornare: true
				});
			}
		}
	});

Come si può vedere nel codice precedente, quando un utente trascina sul lato sinistro delle materie scolastiche e messo in una cella nel calendario, funzione di callback onDrop verrà chiamata. Abbiamo clonato l'elemento di trascinamento dal lato sinistro e collegarlo alla cellula di pianificazione. Quando trascinato dalla scuola programma soggetto di una cella in un'altra cella, è sufficiente spostarlo.

Scarica esempi jQuery EasyUI

jeasyui-dd-timetable.zip