jQuery dragging elements and reordering elements_jquery

The example in this article describes the implementation method of dragging elements and reordering elements with jQuery. It is shared with everyone for your reference. The specific implementation content is as follows

Rendering:

The specific content is as follows:

From the picture above you can see the function we want to implement today. When the user drags an image, he or she can change the existing sorting of the image and update the order in the table. For example, users can drag the layout of our website at will, as Google iGoogle has already implemented. This greatly 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") %>">
        <jQuery dragging elements and reordering elements_jquery alt="jQuery dragging elements and reordering elements_jquery" src="<%#Eval("Link") %>" />
      </li>
    </ItemTemplate>
    </asp:Repeater>   
  </ul>
</div>

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

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 calling them later becomes 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, the join() method is used to obtain 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 composed 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")); 
  } 
});

Finally, perform the sorting 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 no database operation is performed, the plug-in only needs to call sorttable to complete the dragging of elements.

The above is the implementation method of jQuery dragging elements and reordering elements. I hope it will be helpful to everyone's learning.