jQuery EasyUI Glisser-déposer -Créer un emploi du temps scolaire

Ce tutoriel vous montrera comment utiliser jQuery EasyUI pour créer un emploi du temps scolaire. Nous créerons deux tableaux : afficher les matières scolaires à gauche et l'emploi du temps à droite. Vous pouvez faire glisser des matières scolaires et les déposer sur les cellules de l'emploi du temps. Une matière scolaire est un élément <div class="item">, et une cellule d'emploi du temps est un élément <td class="drop">.

Afficher les matières scolaires

    <div class="left">
        <table>
            <tr>
                <td><div class="item">English</div></td>
            </tr>
            <tr>
                <td><div class="item">Science</div></td>
            </tr>
            <!-- other subjects -->
        </table>
    </div>

Afficher l'emploi du temps

    <div class="right">
        <table>
            <tr>
                <td class="blank"></td>
                <td class="title">Monday</td>
                <td class="title">Tuesday</td>
                <td class="title">Wednesday</td>
                <td class="title">Thursday</td>
                <td class="title">Friday</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>
            <!-- other cells -->
        </table>
    </div>

Faites glisser les matières scolaires à gauche

    $('.left .item').draggable({
        revert:true,
        proxy:'clone'
    });

Déposer les matières scolaires sur les cellules de l'emploi du temps

    $('.right td.drop').droppable({
        onDragEnter:function(){
            $(this).addClass('over');
        },
        onDragLeave:function(){
            $(this).removeClass('over');
        },
        onDrop:function(e,source){
            $(this).removeClass('over');
            if ($(source).hasClass('assigned')){
                $(this).append(source);
            } else {
                var c = $(source).clone().addClass('assigned');
                $(this).empty().append(c);
                c.draggable({
                    revert:true
                });
            }
        }
    });

Comme vous pouvez le voir dans le code ci-dessus, lorsque l'utilisateur fait glisser une matière scolaire depuis la gauche et la dépose dans une cellule d'emploi du temps, la fonction de rappel onDrop est appelée. Nous clonons l'élément source glissé depuis la gauche et l'ajoutons à la cellule d'emploi du temps. Lorsque vous faites glisser une matière scolaire d'une cellule de l'emploi du temps vers une autre cellule, déplacez-la simplement.

Télécharger les exemples jQuery EasyUI

jeasyui-dd-timetable.zip