Apprenez facilement le plug-in jQuery EasyUI EasyUI implémente des opérations de glissement de base

Ce tutoriel vous montre comment rendre les éléments HTML déplaçables, dans ce cas nous allons créer trois éléments DIV puis activer leur déplacement et leur placement.

Tout d'abord, nous créons trois éléments

<div id="dd1" class="dd-demo"></div>
<div id="dd2" class="dd-demo"></div>
<div id="dd3" class="dd-demo"></div>

Copier après la connexion

Pour le premier élément >div<, nous le rendons déplaçable par défaut.

$('#dd1').draggable(); Pour le deuxième élément

, nous le rendons déplaçable en créant un proxy qui clone l'élément d'origine.

$('#dd2').draggable({
 proxy:'clone'
});

Copier après la connexion

Pour le troisième élément

, nous le rendons déplaçable en créant un proxy personnalisé.

$('#dd3').draggable({
 proxy:function(source){
 var p = $('<div class="proxy">proxy</div>');
 p.appendTo('body');
 return p;
 }
});

Copier après la connexion

Ce qui suit est un exemple simple du programme scolaire, tout le monde est invité à apprendre :

Nous allons créer deux tableaux : un montrant les matières scolaires à gauche et les horaires à droite. Vous pouvez faire glisser et déposer des matières scolaires sur des cellules d'emploi du temps. La matière scolaire est un élément

et la cellule d'horaire est un élément

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>

Copier après la connexion

Horaire des spectacles

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

Copier après la connexion

Faites glisser les matières scolaires vers la gauche

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

Copier après la connexion

Placer les matières scolaires sur les cellules de l'horaire

$('.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
  });
 }
 }
});

Copier après la connexion

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

Ce qui précède a pour but de vous montrer comment utiliser jQuery EasyUI pour créer un programme scolaire. J'espère que cela vous sera utile dans votre étude et que vous continuerez à prêter attention au prochain article de l'éditeur.

Étiquettes associées：

easyui jquery 拖动课程表

source：php.cn

Article précédent：Résumé des exemples de gestion des exceptions dans les compétences de programmation javascript_javascript Article suivant：Plug-in Bootstrap js que vous devez acquérir tous les jours_compétences javascript

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Derniers articles par auteur