jquery glisser-déposer supprimer tr td

jQuery est une bibliothèque JavaScript populaire utilisée pour simplifier l'écriture et le traitement du code JavaScript. Parmi elles, le glisser-déposer est l’une des fonctions courantes des applications Web, qui peut améliorer l’interactivité du site Web et l’expérience utilisateur. La méthode glisser-déposer de jQuery est particulièrement utile lors de l'implémentation de la fonction glisser-déposer de tableaux sur un site Web.

1. Analyse des exigences

Pour réaliser la fonction de suppression de lignes et de colonnes dans le tableau par glisser-déposer, nous devons effectuer l'analyse des exigences suivante :

1. Besoin d'ajouter un mouvement de souris à chaque ligne et colonne du tableau. Événements pour implémenter des opérations de glisser-déposer ;
2. Lorsque la souris se déplace sur une ligne ou une colonne, il doit y avoir un effet d'invite pour informer l'utilisateur de l'objet que la souris fait glisser ;
3. Lorsque la souris fait glisser une ligne ou une colonne ; , la position de la souris doit être déterminée La relation de position avec d'autres lignes ou colonnes du tableau pour réaliser les opérations de suppression.

2. Méthode d'implémentation

Sur la base de l'analyse de la demande, nous pouvons utiliser les méthodes suivantes pour implémenter la fonction glisser-déposer de tableau :

1. Ajouter des lignes et des colonnes en HTML

Nous pouvons utiliser les fichiers < pour créer un tableau et ajouter des attributs d'identification à chaque ligne et colonne. Lors de l'implémentation de la fonction glisser-déposer de table, l'attribut id de la ligne ou de la colonne peut être utilisé pour déterminer la position et la supprimer.

Par exemple :

<table id="myTable">
  <tr id="row1">
    <td>......</td>
  </tr>
  <tr id="row2">
    <td>......</td>
  </tr>
  <tr id="row3">
    <td>......</td>
  </tr>
  ......
</table>

2. Méthode glisser-déposer jQuery

jQuery fournit la méthode draggable(), qui peut facilement implémenter la fonction glisser-déposer. Il suffit d'ajouter cette méthode pour chaque ligne ou colonne. draggable()方法，可以轻松实现拖拽功能。我们只需要对每行或每列添加该方法即可。

例如：

$('#row1').draggable();

3. 判断鼠标位置

实现拖拽删除功能的核心是如何判断鼠标位置与表格中其它行或列的位置关系。我们可以借助jQuery的offset()方法来获取每行或每列的绝对位置，再通过计算，来判断鼠标位置和被拖拽对象的位置关系。

例如：

var row1 = $('#row1').offset().top;
var row2 = $('#row2').offset().top;
var row3 = $('#row3').offset().top;
var mouse = event.pageY;
if (mouse > row1 && mouse < row2) {
  console.log('鼠标在第一行和第二行之间');
}

4. 实现移动提示效果

在实现拖拽删除功能的过程中，我们可以通过设置被拖拽对象的样式来实现提示效果。例如，在行被拖拽时，我们可以通过设置被拖拽行的透明度，来实现行的半透明提示效果。

例如：

$('#row1').draggable({
  helper: 'clone', // clone方式，拖动时保留原行
  opacity: 0.6, // 设置半透明
  cursor: 'move' // 设置移动时鼠标样式
});

5. 实现删除操作

在判断鼠标位置关系后，我们可以通过remove()

Par exemple :

$('#row1').draggable({
  stop: function(event, ui) {
    if (mouse > row1 && mouse < row2) {
      $(this).remove();
    }
  }
});

Déterminer la position de la souris

Le cœur de l'implémentation de la fonction glisser-déposer est de savoir comment déterminer la relation entre la position de la souris et les autres lignes ou colonnes du tableau. . Nous pouvons utiliser la méthode offset() de jQuery pour obtenir la position absolue de chaque ligne ou colonne, puis calculer la relation de position entre la position de la souris et l'objet glissé.

🎜Par exemple : 🎜rrreee
🎜Pour obtenir l'effet d'invite mobile🎜🎜🎜Dans le processus d'implémentation de la fonction glisser-déposer, nous pouvons obtenir l'effet d'invite en définissant le style de l'objet glissé . Par exemple, lorsqu'une ligne est déplacée, nous pouvons définir la transparence de la ligne déplacée pour obtenir un effet d'invite translucide pour la ligne. 🎜🎜Par exemple : 🎜rrreee
🎜Réaliser l'opération de suppression🎜🎜🎜Après avoir jugé la relation de position de la souris, nous pouvons utiliser la méthode remove() pour supprimer la ligne glissée ou La colonne est supprimée du tableau. Par exemple : 🎜rrreee🎜Il convient de noter qu'avant d'effectuer l'opération de suppression, nous devons déterminer combien de lignes ou de colonnes il y a dans le tableau pour garantir qu'il n'y aura pas de lignes ou de colonnes vides dans le tableau. 🎜🎜3. Conclusion🎜🎜Grâce à la méthode d'implémentation ci-dessus, nous pouvons facilement implémenter la fonction glisser-déposer de table. De plus, jQuery dispose de nombreuses autres méthodes pratiques qui peuvent nous aider à développer d'excellentes applications Web et à améliorer l'expérience utilisateur et l'interactivité. Apprendre et maîtriser jQuery est crucial pour ceux qui sont engagés dans le développement Web. 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!