JQuery drag elements and re-sort them. jquery drag elements to sort them.

JQuery drag elements and re-sort them. jquery drag elements to sort them.

This article describes how to drag and sort elements by jQuery. The specific implementation content is as follows:

:

The details are as follows:

We can see the functions we want to implement today. When you drag an image, you can change the existing order of the image and update the order in the table. For example, users can drag the layout of our website at will, such as Google iGoogle. This improves the user experience.

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") %>">              </li>    </ItemTemplate>    </asp:Repeater>     </ul></div>

There is a single sequence. When the user selects the sequence, the data sorting in the database is changed when the image is dragged. Hide the domain to save the order of original images. Ul displays the image list.

In order to see the past, a little bit of style is added:

Var show = jQuery ("# show"); // The output prompts var orderlist = jQuery ("# orderlist "); // original order var check = jQuery ("# check"); // whether to update to database

First, save the commonly used selector to make subsequent calls more concise. This part is certainly correct. Pai_^

// Save the original order var order = []; list. children ("li "). each (function () {order. push (this. title); // The original sorting order is saved in the title. Then, change the title jQuery (this ). attr ("title", "you can drag to sort") ;}); orderlist. val (order. join (','));

Save the original sorting order to the hidden domain. Here, the push () method of the array is used to add the title (original order of arrangement) in each ul li to the array. Finally, we use the join () method to obtain the original sorting order and return a string. The Order format is 1, 2, and 3.

// Ajax Update var Update = function (itemid, itemorder) {jQuery. ajax ({type: "post", url: "update. aspx ", // id: ID of the new sorting, order: original sorting order data: {id: itemid, order: orderlist. val ()}, beforeSend: function () {show.html ("Updating") ;}, success: function () {show.html ("updated successfully ");}});};

Next, separate the ajax update blocks. In this way, the program becomes more neat and there is no new thing.

// 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 a single sequence is selected, the order in which the table is sorted is updated. if (update) {Update (itemid) ;}else {show.html ("");}};

Similar to the sorting order, IDS constitute a string and are passed to the Update () method. The parameter update in the function is checkbox or not.

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

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

It can be seen that if no database operation is performed, the plug-in can drag elements by calling sorttable.

The above is the implementation method of jQuery to drag elements and re-sort the elements. I hope this will be helpful for your learning.

Articles you may be interested in:

• JQuery element drag-and-drop prototype code
• Jquery-based mouse drag and drop elements to copy and write results
• JQuery drag element size change implementation code
• Jquery web page element drag plug-in effect and implementation
• Example of jquery sort elements by dragging
• Drag html elements using jQuery