jquery implémente le tri par glisser-déposer des éléments (code ci-joint)-js tutoriel-php.cn

jquery implémente le tri par glisser-déposer des éléments (code ci-joint)

php中世界最好的语言

Libérer： 2018-04-26 09:28:22

original

2198 Les gens l'ont consulté

Cette fois, je vais vous présenter jquery pour implémenter le tri par glisser-déposer (avec code). Quelles sont les précautions pour que jquery implémente le tri par glisser-déposer des éléments Voici un cas pratique, jetons un coup d'œil.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>jquery学习-jquery对元素拖动排序</title> 
<style type="text/css"> 
#show 
{ 
color: Red; 
} 
#list 
{ 
cursor: move; 
width: 300px; 
} 
#list li 
{ 
border: solid 1px yellow; 
float: left; 
list-style-type
: none; 
margin-top: 10px;

Copier après la connexion

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

<span id="show">
<p>
  <input id="check" type="checkbox" />
</p>
<p>
  <input type="hidden" id="orderlist" />
  <ul id="list">
    <asp:Repeater ID="rptOrder" runat="server">
    <ItemTemplate>
      <li id="<%#Eval("ID") %>" title="<%#Eval("OrderID") %>">
        <img alt="img" src="<%#Eval("Link") %>" />
      </li>
    </ItemTemplate>
    </asp:Repeater>   
  </ul>
</p>

Copier après la connexion

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.

Afin de faciliter la visualisation, j'ai ajouté un petit style :

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

Copier après la connexion

Enregistrez d'abord les sélecteurs couramment utilisés afin qu'ils puissent être appelés plus tard de manière plus concise. 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(&#39;,&#39;));

Copier après la connexion

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, utilisez la méthode join() pour obtenir l'ordre de tri 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("更新成功"); 
    } 
  }); 
};

Copier après la connexion

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(&#39;,&#39;); 
  //如果单选框选中，则更新表中排列顺序 
  if (update) { 
    Update(itemid); 
  } 
  else { 
    show.html(""); 
  } 
};

Copier après la connexion

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")); 
  } 
});
} 
</style> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.js"></script> 
<script type="text/javascript"> 
$(document).ready(function () { 
//保存常用选择器 
var list = $("#list"); //ul 
var show = $("#show"); //输出提示 
var orderlist = $("#orderlist"); //原顺序 
var check = $("#check"); //是否更新到数据库 
//保存原来的排列顺序 
var order = []; 
list.children("li").each(function () { 
order.push(this.title); //原排列顺序保存在title，得到后更改title 
$(this).attr("title", "你可以拖动进行排序"); 
}); 
orderlist.val(order.join()); 
//执行排列操作 
list.sortable({ 
axis: &#39;y&#39;,//只能横向拖动 
opacity: 0.7,// 移动时的透明度 
update: function () {//当排序动作结束时且元素坐标已经发生改变时触发此事件。 
Submit(check.attr("checked")); 
} 
}); 
//ajax更新 
var Update = function (itemid, itemorder) { 
$.ajax({ 
type: "post", 
url: "update.aspx", 
data: { id: itemid, order: orderlist.val() }, //id:新的排列对应的ID,order：原排列顺序 
beforeSend: function () { 
show.html("正在更新"); 
}, 
success: function (req) { 
if (req == "100") { 
show.html("更新成功"); 
} 
else if (req == "001") { 
show.html("失败，请稍后再试"); 
} 
else { 
show.html("参数不全"); 
} 
} 
}); 
}; 
//调用ajax更新方法 
var Submit = function (update) { 
var order = []; 
list.children("li").each(function () { 
order.push(this.id); 
}); 
var itemid = order.join(&#39;,&#39;); 
//如果单选框选中，则更新表中排列顺序 
if (update) { 
Update(itemid); 
} 
else { 
show.html(""); 
} 
}; 
}); 
</script> 
</head> 
<body> 
<form method="post" action="jquery-drag-order-sort.aspx" id="form1"> 
<p class="aspNetHidden"> 
<input type="hidden" name="VIEWSTATE" id="VIEWSTATE" value="/wEPDwUJNDc3MzMwNjM4D2QWAgIBD2QWAgIBDxYCHgtfIUl0ZW1Db3VudAIDFgZmD2QWAmYPFQMCMTQBMSdodHRwOi8vd3d3LmJhaWR1LmNvbS9pbWcvYmFpZHVfbG9nby5naWZkAgEPZBYCZg8VAwIxMwEyL2h0dHA6Ly93d3cuZ29vZ2xlLmNvbS5oay9pbWFnZXMvc3Jwci9sb2dvM3cucG5nZAICD2QWAmYPFQMCMTYBMyxodHRwOi8vaW1nMy5jbi5tc24uY29tL2ltYWdlcy8wODA5L2xvZ28xLnBuZ2RkDx67fZ2swhZiUjvFaE+ziATRZTct5b77PuWvqXLCUlg=" /> 
</p> 
<span id="show"></span> 
<h1>jQuery对元素拖动排序</h1> 
<p>拖动时同时更新数据库数据：<input type="checkbox" id="check" /></p> 
<p> 
<input type="hidden" id="orderlist" /> 
<ul id="list"> 
<li id="14" title="1"> 
<img alt="img" src="http://www.baidu.com/img/baidu_logo.gif" /></li> 
<li id="13" title="2"> 
<img alt="img" src="http://www.google.com.hk/images/srpr/logo3w.png" /></li> 
<li id="16" title="3"> 
<img alt="img" src="http://img3.cn.msn.com/images/0809/logo1.png" /></li> 
</ul> 
</p> 
</form> 
</body> 
</html>

Copier après la connexion

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

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

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Explication détaillée des étapes pour implémenter le tri de table avec sortElements

jquery implémente le tri de table + réel -fonction de recherche de temps

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!