jQuery拖动和重新排序元素

本文描述了jQuery拖动元素并重新排序的实现方法，分享给大家参考。具体实施内容如下。

渲染：

详情如下：

从上图中，我们可以看到我们今天要实现的功能。用户拖动图片时，可以改变图片已有的排序，更新表格中的排列顺序。比如用户可以随意拖动我们网站中的布局，比如谷歌iGoogle。因此，很好地改善了用户体验。

接下来，我们将逐步实现这个功能。

span ID=' show ' div input ID=' check ' type=' checkbox '/div div input type=' hidden ' ID=' order list '/ul ID=' list ' asp: repeater ID=' rptOrder ' runat=' server ' item template Li ID=' % # Eval(' ID ')% ' title=' % # Eval(' order ID ')% ' img alt=' img ' src=' http 3360% # Eval(' link ' % ')'//Li/item template/asp3333隐藏字段保存原始图片排列顺序。Ul显示图片列表。

为了看得过去，加了一点格调：

var show=jQuery(' # show ')；//输出提示var order list=jquery(' # order list ')；//原序列var check=jQuery(' # check ')；//是否更新到数据库，先保存常用的选择器，这样以后调用会变得更简单。这个绝对没问题。^_^

//保存原始排列顺序var order=[]；list.children('li ')。每个(function(){ order . push(this . title)；//原排序顺序保存在title中，然后更改标题jQuery(这个)。attr('title '，'可以拖动进行排序')；});orderlist.val(order.join('，'))；将原始排列顺序保存到隐藏字段。这里使用了数组的push()方法，即将ul的每一个li中的标题(原始排列顺序)添加到数组中。最后，使用join()方法，获得原始排列顺序并返回一个字符串。现在排序顺序的格式是1，2，3。

//Ajax update varupdate=function(itemID，item order){ jquery . Ajax({ type : ' post '，url3360' update.aspx '，//ID:新排列对应的id，Order:原顺序为data: {id: itemid，order: orderlist.val ()}，before send 3360 function(){ show . html('正在更新')；}，success : function(){ show . html('更新成功')；} });};接下来，分离ajax更新块。这样，程序变得更干净了，这一块也没有什么新意。

//调用ajax update方法var submit=function(update){ var order=[]；list.children('li ')。每个(function(){ order . push(this . id)；});var itemid=order.join('，')；//如果选择了单选框，则在(update) {Update(itemid)时更新表中的顺序；} else { show . html(“”)；} };与获得的顺序类似，ID作为字符串传递给Update()方法。功能中的参数更新是复选框是否被选中。

//执行排列操作list . sortable({ opa city 3360 0.7，update : function(){ submit(check . attr(' checked '))))；} });最后，执行排列操作。背景部分是原排列顺序对应的当前ID的更新，大家都不陌生。

可以看到，如果不进行数据库操作，插件只需要调用sorttable就可以完成元素的拖动。

以上就是jQuery拖动元素并重新排序的实现方法，希望对大家的学习有所帮助。