jquery drag elements and reorder elements _jquery

This article describes the jquery drag elements and the implementation of the reordering of elements, shared for everyone to reference, the implementation of the following content

Effect Chart:

The specific contents are as follows:

The image above shows the features we are going to implement today. When a user drags a picture, it can change the order in which the picture is sorted and update the arrangement in the table. For example, users can drag the layout of our site, such as Google igoogle has been achieved. This is a good way to improve the user experience.

Below, we 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 radio box that changes the sort of data in the database when you drag the picture when the user selects it. Hidden Fields preserve the original picture order. UL displays a list of pictures.

In order to be able to see the past, slightly added a bit of style:

var show = JQuery ("#show"); Output hint 
var orderlist = jquery ("#orderlist");//original order 
var check = jquery ("#check");//Update to database

First, save the commonly used selectors so that the call becomes simpler. I'm sure there's no problem with this one. ^_^

Saves the original order of the orders 
var = []; 
List.children ("Li"). each (function () { 
  order.push (this.title);//The original order is saved in title, then change the title 
  jQuery (This). attr ("title", "You can drag to sort"); 
Orderlist.val (Order.join (', '));

Saves the original order to the hidden field. Here we use the push () method of the array, which is to add the title of each Li in the UL (the original arrangement order) to the array. Finally, we use the Join () method to get the original order and return a string. Now the arrangement order format is 1,2,3.

Ajax update 
var update = function (itemid, itemorder) { 
  Jquery.ajax ({ 
    type: Post), 
    URL: "Update.aspx", 
    //id: The new arrangement corresponds to the Id,order: original order
    data: {id:itemid, Order:orderlist.val ()},  
    beforesend:function () { 
      show.html ("Updating"); 
    }, 
    success:function () { 
      show.html ("Update succeeded"); 
};

Next, separate the AJAX update blocks separately. The program becomes neater, and there is no new thing.

Invoke Ajax Update method 
var Submit = function (update) { 
  var order = []; 
  List.children ("Li"). each (function () { 
    order.push (this.id); 
  }); 
  var itemid = Order.join (', '); 
  If the Radio box is selected, the Arrange order if 
  (update) { 
    update (itemid) in 
  the table is updated; 
  else { 
    show.html (""); 
  } 
};

Similar to the order of arrangement, the ID is passed to the update () method by composing a string. The parameter in the function is update to check whether the checkbox is selected.

Performs an arrangement operation 
list.sortable ({ 
  opacity:0.7, 
  update:function () { 
    Submit (check.attr ("checked")); 
  } 
);

Finally, the arrange operation is performed. The background section is the current ID corresponding to the original order of updates, I believe we are not unfamiliar.

You can see that if you do not perform a database operation, the plug-in will only need to call sorttable to complete the drag of the element.

The above is the jquery drag element and reorder the elements to achieve the method, I hope to help you learn.