jQuery faisant glisser des éléments et réorganisant elements_jquery

L'exemple de cet article décrit la méthode d'implémentation pour faire glisser des éléments et réorganiser les éléments avec jQuery. Il est partagé avec tout le monde pour votre référence. Le contenu spécifique de l'implémentation est le suivant

Rendu :

Le contenu spécifique est le suivant :

Dans l'image ci-dessus, vous pouvez voir la fonction que nous souhaitons implémenter aujourd'hui. Lorsque l'utilisateur fait glisser une image, il peut modifier le tri existant de l'image et mettre à jour l'ordre dans le tableau. Par exemple, les utilisateurs peuvent faire glisser à volonté la mise en page de notre site Web, comme Google iGoogle l'a déjà mis en œuvre. Cela améliore considérablement l’expérience utilisateur.

Ci-dessous, nous allons implémenter cette fonction étape par étape.

<span id="show">
<div>
  <input id="check" type="checkbox" />
</div>
<div>
  <input type="hidden" id="orderlist" />
  <ul id="list">
    <asp:Repeater ID="rptOrder" runat="server">
    <ItemTemplate>
      <li id="<%#Eval("ID") %>" title="<%#Eval("OrderID") %>">
        <jQuery faisant glisser des éléments et réorganisant elements_jquery alt="jQuery faisant glisser des éléments et réorganisant elements_jquery" src="<%#Eval("Link") %>" />
      </li>
    </ItemTemplate>
    </asp:Repeater>   
  </ul>
</div>

Il y a un bouton radio. Lorsque l'utilisateur le sélectionne, le tri des données dans la base de données sera modifié lorsque l'image sera déplacée. Le champ masqué enregistre l'ordre original des images. ul affiche la liste des images.

Pour que ce soit plus facile à voir, j'ai ajouté un petit style :

var show = jQuery("#show"); //输出提示 
var orderlist = jQuery("#orderlist"); //原顺序 
var check = jQuery("#check"); //是否更新到数据库

Enregistrez d’abord les sélecteurs couramment utilisés afin que leur appel ultérieur devienne plus simple. Tout le monde n’aura certainement aucun problème avec celui-ci. ^_^

//保存原来的排列顺序 
var order = []; 
list.children("li").each(function() { 
  order.push(this.title); //原排列顺序保存在title，得到后更改title 
  jQuery(this).attr("title", "你可以拖动进行排序"); 
}); 
orderlist.val(order.join(','));

Enregistrez l'ordre de tri d'origine dans le champ masqué. La méthode push() du tableau est utilisée ici, qui consiste à ajouter le titre (ordre d'arrangement original) dans chaque li de ul au tableau. Enfin, la méthode join() est utilisée pour obtenir l'ordre d'arrangement d'origine et renvoyer une chaîne. Le format de l'ordre de tri est désormais 1,2,3.

//ajax更新 
var Update = function(itemid, itemorder) { 
  jQuery.ajax({ 
    type: "post", 
    url: "update.aspx", 
    //id:新的排列对应的ID,order：原排列顺序
    data: { id: itemid, order: orderlist.val() },  
    beforeSend: function() { 
      show.html("正在更新"); 
    }, 
    success: function() { 
      show.html("更新成功"); 
    } 
  }); 
};

Ensuite, séparez le bloc de mise à jour ajax séparément. De cette façon, le programme devient plus propre et il n'y a rien de nouveau dans ce domaine.

//调用ajax更新方法 
var Submit = function(update) { 
  var order = []; 
  list.children("li").each(function() { 
    order.push(this.id); 
  }); 
  var itemid = order.join(','); 
  //如果单选框选中，则更新表中排列顺序 
  if (update) { 
    Update(itemid); 
  } 
  else { 
    show.html(""); 
  } 
};

Semblable à l'obtention de l'ordre de tri, l'ID est composé dans une chaîne et transmis à la méthode Update(). La mise à jour des paramètres dans la fonction est de savoir si la case est cochée.

//执行排列操作 
list.sortable({ 
  opacity: 0.7, 
  update: function() { 
    Submit(check.attr("checked")); 
  } 
});

Enfin, effectuez l'opération de tri. La partie d'arrière-plan est la mise à jour de l'identifiant actuel correspondant à l'ordre d'arrangement d'origine, je pense que tout le monde le connaît.

On constate que si aucune opération sur la base de données n'est effectuée, le plug-in n'a besoin que d'appeler sorttable pour terminer le glissement des éléments.

Ce qui précède est la méthode d'implémentation de jQuery pour faire glisser des éléments et réorganiser les éléments. J'espère que cela sera utile à l'apprentissage de chacun.