Home > Article > Web Front-end > jquery implements drag sorting of elements (code attached)

jquery implements drag sorting of elements (code attached)

php中世界最好的语言Original: 2018-04-26 09:28:222123browse

This time I will bring you jquery to implement element drag sorting (with code). What are the precautions for jquery to implement element drag sorting? . The following is a practical case, let's take a look.

<!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;

Below, we will implement this function step by step.

7c928e1d211f36ec7310729fd46a47c1
e388a4556c0f65e1904146cc1a846bee
  54153603597a11c0ecaca8d50659c6a5
94b3e26ee717c64999d7867364b1b4a3
e388a4556c0f65e1904146cc1a846bee
  42f9d5e1cca7403849efb03461e9dc4d
  fffa25a7818d82750bcdb1d93f1448b2
    d1c056396ead6d6604ab822b507e6f06
    0fc5c90f257c8bbe709da427d559475b
      bf6105e4f5d8de1e7369b22baf553752" title="73c2b177074e40726d0145cd07cfd221">
        9566dce7235c757661f3387e59eb332f" />
      bed06894275b65c1ab86501b08a632eb
    247b94fc9b32a7a895c80acdf798d00f
    eae969b2b8f4f46816c415c43cee3362   
  929d1f5ca49e04fdcb27f9465b944689
94b3e26ee717c64999d7867364b1b4a3

There is a radio button. When the user selects it, the sorting of the data in the database is changed when the picture is dragged. The hidden field saves the original order of pictures. ul displays the picture list.

In order to make it easier to see, I added a little style:

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

First save the commonly used selectors so that subsequent calls will become simpler. Everyone will definitely have no problem with this one. ^_^

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

Save the original sort order to the hidden field. The push() method of the array is used here, which is to add the title (original arrangement order) in each li of ul to the array. Finally, use the join() method to get the original arrangement order and return a string. The sort order format is now 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("更新成功"); 
    } 
  }); 
};

Next, separate the ajax update block separately. This way the program becomes cleaner and there is nothing new in this area.

//调用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(""); 
  } 
};

Similar to getting the sort order, the ID is formed into a string and passed to the Update() method. The parameter update in the function is whether the checkbox is selected.

//执行排列操作 
list.sortable({ 
  opacity: 0.7, 
  update: function() { 
    Submit(check.attr("checked")); 
  } 
});
} 
531ac245ce3e4fe3d50054a55f265927 
8bd863e91d98a06233d67cb070a5a0352cacc6d41bbb37262a98f745aa00fbf0 
fa50566c1ba3ab9c330d111a9753321f2cacc6d41bbb37262a98f745aa00fbf0 
8019067d09615e43c7904885b5246f0a 
$(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: 'y',//只能横向拖动 
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(','); 
//如果单选框选中，则更新表中排列顺序 
if (update) { 
Update(itemid); 
} 
else { 
show.html(""); 
} 
}; 
}); 
2cacc6d41bbb37262a98f745aa00fbf0 
9c3bca370b5104690d9ef395f2c5f8d1 
6c04bd5ca3fcae76e30b72ad730ca86d 
0f28a2e542498a06984532c26ec903d7 
4d8013dd52b59b7f5010ca6f4d407322 
abb3ee51e3edf4023a53117b7f59c8d7 
94b3e26ee717c64999d7867364b1b4a3 
7c928e1d211f36ec7310729fd46a47c154bdf357c58b8a65c66d7c19c8e4d114 
4a249f0d628e2318394fd9b75b4636b1jQuery对元素拖动排序473f0a7621bec819994bb5020d29372a 
e388a4556c0f65e1904146cc1a846bee拖动时同时更新数据库数据：3946ef108da436c11ba9837ecc9a60e094b3e26ee717c64999d7867364b1b4a3 
e388a4556c0f65e1904146cc1a846bee 
42f9d5e1cca7403849efb03461e9dc4d 
fffa25a7818d82750bcdb1d93f1448b2 
a147adb5559a34aa31a726348d34ab3c 
09cd0892fd3fa82f3cd76967db807afcbed06894275b65c1ab86501b08a632eb 
acba92fa4ca9d3de20e0fe1b3a8a92b9 
272c3bad1ce688d7eb3565c47a7aae64bed06894275b65c1ab86501b08a632eb 
d6446f532190dc211a3be932a20b4760 
604eb8bc7ff6e6c7ceccd55b37633193bed06894275b65c1ab86501b08a632eb 
929d1f5ca49e04fdcb27f9465b944689 
94b3e26ee717c64999d7867364b1b4a3 
f5a47148e367a6035fd7a2faa965022e 
36cc49f0c466276486e50c850b7e4956 
73a6ac4ed44ffec12cee46588e518a5e

Finally, perform the arrangement operation. The background part is the update of the current ID corresponding to the original arrangement order. I believe everyone is familiar with it.

It can be seen that if database operation is not performed, the plug-in only needs to call sorttable to complete the dragging of elements.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

jquery implements drag sorting of elements (code attached)

Related articles