jQuery EasyUI penurunan - Membuat kurikulum sekolah
Tutorial ini akan menunjukkan cara untuk membuat kurikulum sekolah menggunakan jQuery EasyUI. Kami akan membuat dua tabel: pelajaran sekolah ditampilkan di sebelah kiri untuk menampilkan jadwal di sebelah kanan. Anda dapat drag dan pelajaran sekolah ditempatkan pada sel jadwal. pelajaran sekolah adalah <div class = "item"> elemen, sel adalah jadwal <td class = "drop"> elemen.
pelajaran sekolah display
<Class Div = "left"> <Table> <Tr> <Td> <div class = "item"> English </ div> </ td> </ Tr> <Tr> <Td> <div class = "item"> Ilmu </ div> </ td> </ Tr> <! - Mata pelajaran lainnya -> </ Table> </ Div>
Tampilkan Timeline
<Class Div = "right"> <Table> <Tr> <Class Td = "blank"> </ td> <Td class = "title"> Senin </ td> <Td class = "title"> Selasa </ td> <Td class = "title"> Rabu </ td> <Td class = "title"> Kamis </ td> <Td class = "title"> Jumat </ td> </ Tr> <Tr> <Td class = "waktu"> 08:00 </ td> <Class Td = "drop"> </ td> <Class Td = "drop"> </ td> <Class Td = "drop"> </ td> <Class Td = "drop"> </ td> <Class Td = "drop"> </ td> </ Tr> <! - Sel-sel lain -> </ Table> </ Div>
Drag di sebelah kiri mata pelajaran sekolah
$ ( '. Kiri .item'). Draggable ({ kembali: benar, Proxy: 'clone' });
pelajaran sekolah ditempatkan di sel pada jadwal
$ ( '. Td.drop kanan'). Droppable ({ onDragEnter: function () { $ (Ini) .addClass ( 'lebih'); }, onDragLeave: function () { $ (Ini) .removeClass ( 'lebih'); }, onDrop: function (e, sumber) { $ (Ini) .removeClass ( 'lebih'); if ($ (sumber) .hasClass ( 'ditugaskan')) { $ (Ini) Append (sumber); } Lain { var c = $ (sumber) .clone () addClass ( 'ditugaskan') .; $ (Ini) .empty () append (c) .; c.draggable ({ kembali: true }); } } });
Seperti yang Anda lihat dalam kode di atas, ketika pengguna menyeret di sisi kiri dari mata pelajaran sekolah dan ditempatkan di sebuah sel di jadwal, fungsi callback onDrop akan dipanggil. Kami kloning unsur sumber tarik dari sisi kiri dan melampirkannya ke sel jadwal. Ketika diseret dari jadwal pelajaran sekolah sel ke sel lain, hanya memindahkannya ke.