Of Stack

Jquery example of dragging and sorting an element

  • 2020-03-30 01:25:05
  • OfStack

Full code :(download at the end of aspx file) 

 

<!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 learning -jquery Drag and sort the elements </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; 

} 

</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 () { 



//Save the commonly used selector 

var list = $("#list"); //ul 

var show = $("#show"); //The output prompt is 

var orderlist = $("#orderlist"); //Original order 

var check = $("#check"); //Whether to update to database 



//Save the original order 

var order = []; 

list.children("li").each(function () { 

order.push(this.title); //The original order is saved in the title, and then the title 
 is changed
$(this).attr("title", " You can sort it by dragging it "); 

}); 

orderlist.val(order.join()); 

//Perform the permutation operation 

list.sortable({ 

axis: 'y',//You can only drag 
 horizontally
opacity: 0.7,//Transparency when moving 

update: function () {//This event is triggered when the sorting action ends and the element coordinates have changed. < br / >
Submit(check.attr("checked")); 

} 

}); 



//Ajax updates 

var Update = function (itemid, itemorder) { 

$.ajax({ 

type: "post", 

url: "update.aspx", 

data: { id: itemid, order: orderlist.val() }, //Id: the id corresponding to the new permutation,order: the original permutation order 

beforeSend: function () { 

show.html(" Being updated "); 

}, 

success: function (req) { 

if (req == "100") { 

show.html(" The update is successful "); 

} 

else if (req == "001") { 

show.html(" Failed, please try again later "); 

} 

else { 

show.html(" Parameter is not complete "); 

} 

} 

}); 

}; 



//Call the ajax update method 

var Submit = function (update) { 

var order = []; 

list.children("li").each(function () { 

order.push(this.id); 

}); 

var itemid = order.join(','); 

//If the menu is selected, update the order in the table 

if (update) { 

Update(itemid); 

} 

else { 

show.html(""); 

} 

}; 







}); 

</script> 

</head> 



<body> 

<form method="post" action="jquery-drag-order-sort.aspx" id="form1"> 

<div class="aspNetHidden"> 

<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUJNDc3MzMwNjM4D2QWAgIBD2QWAgIBDxYCHgtfIUl0ZW1Db3VudAIDFgZmD2QWAmYPFQMCMTQBMSdodHRwOi8vd3d3LmJhaWR1LmNvbS9pbWcvYmFpZHVfbG9nby5naWZkAgEPZBYCZg8VAwIxMwEyL2h0dHA6Ly93d3cuZ29vZ2xlLmNvbS5oay9pbWFnZXMvc3Jwci9sb2dvM3cucG5nZAICD2QWAmYPFQMCMTYBMyxodHRwOi8vaW1nMy5jbi5tc24uY29tL2ltYWdlcy8wODA5L2xvZ28xLnBuZ2RkDx67fZ2swhZiUjvFaE+ziATRZTct5b77PuWvqXLCUlg=" /> 

</div> 



<span id="show"></span> 

<h1>jQuery Drag and sort the elements </h1> 

<div> Update database data while dragging: <input type="checkbox" id="check" /></div> 

<div> 

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

</div> 

</form> 

</body> 

</html>

Below, we will implement this function step by step. 


<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") %>">
        <img alt="img" src="<%#Eval("Link") %>" />
      </li>
    </ItemTemplate>
    </asp:Repeater>   
  </ul>
</div>


There is a single box that changes the sort of data in the database when the user selects and drags the image. The hidden field saves the original sequence of images. Ul displays a list of images.

To make it look good, add a little style: 


var show = jQuery("#show"); //Output prompts
var orderlist = jQuery("#orderlist"); //The original order
var check = jQuery("#check"); // Whether to update to database

Save the usual selectors first so that the subsequent calls are more concise. I'm sure you'll have no problems with this one. ^_^ 


//Save the original order
var order = []; 
list.children("li").each(function() { 
  order.push(this.title); //The original order is saved in the title, then the title is changed
  jQuery(this).attr("title", " You can sort it by dragging it "); 
}); 
orderlist.val(order.join(','));

Save the original order to the hidden field. Here we use the push() method of the array, which is to add the titles (original order) from each li in ul to the array. Finally, we use the join() method to get the original order and return a string. Now the order format is 1,2,3. 


//Ajax to update
var Update = function(itemid, itemorder) { 
  jQuery.ajax({ 
    type: "post", 
    url: "update.aspx", 
    //Id: the id corresponding to the new permutation, and order: the original permutation order
    data: { id: itemid, order: orderlist.val() },  
    beforeSend: function() { 
      show.html(" Being updated "); 
    }, 
    success: function() { 
      show.html(" The update is successful "); 
    } 
  }); 
};

Next, separate out the ajax update blocks. So it's a little bit neater. There's nothing new here. 


//Call the ajax update method
var Submit = function(update) { 
  var order = []; 
  list.children("li").each(function() { 
    order.push(this.id); 
  }); 
  var itemid = order.join(','); 
  //If the menu is selected, the order in the table is updated
  if (update) { 
    Update(itemid); 
  } 
  else { 
    show.html(""); 
  } 
};

Similar to getting the order, the ID is passed as a string to the Update() method. The parameter update in the function is whether the checkbox is checked. 


//Perform the permutation operation
list.sortable({ 
  opacity: 0.7, 
  update: function() { 
    Submit(check.attr("checked")); 
  } 
});

Finally, perform the permutation operation. Background is the ID corresponding to the original order of the update, I believe you are not unfamiliar.

You can see that without database operations, the plug-in just needs to call sorttable to drag the elements.

(link: http://xiazai.jb51.net/201407/yuanma/jquery-drag-sort-order (jb51.net). Rar)

Related articles: