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

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 dc6dce4a544fdca2df29d5ac0ea9906b

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

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

$('#dd1').draggable(); Pour le deuxième élément dc6dce4a544fdca2df29d5ac0ea9906b, nous le rendons déplaçable en créant un proxy qui clone l'élément d'origine.

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

Pour le troisième élément dc6dce4a544fdca2df29d5ac0ea9906b, 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;
 }
});

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 e60d1b54bf999ac9e3299a277954b392 et la cellule d'horaire est un élément 4aa9d01e03735a4fb2ceea8133ac1fc2

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>

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>

Faites glisser les matières scolaires vers la gauche

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

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
  });
 }
 }
});

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.