jquery implements drag sorting of elements (code attached)-JS Tutorial-php.cn

jquery implements drag sorting of elements (code attached)

php中世界最好的语言

Release： 2018-04-26 09:28:22

Original

2153 people have browsed it

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;

Copy after login

Below, we will implement this function step by step.

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

Copy after login

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"); //是否更新到数据库

Copy after login

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(&#39;,&#39;));

Copy after login

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("更新成功"); 
    } 
  }); 
};

Copy after login

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

Copy after login

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

Copy after login

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!