Dragsort html drag-and-drop sorting, and dragsort drag-and-drop sorting

Source: Internet
Author: User

Dragsort html drag-and-drop sorting, and dragsort drag-and-drop sorting

I. Jquery List DragSort
For some pages, such as homepage customization, dynamic drag-and-drop sorting is required. We generally use some js plug-ins to implement these functions because it is difficult to implement them by ourselves. Dragsort helps us fulfill this requirement. With dragsort, we can easily drag and drop elements on html pages and sort them dynamically. Dragsort is a jquery plug-in, which is very convenient to use. Dragsort Website: dragsort: http://dragsort.codeplex.com /.
Download dragsort and decompress it, as shown in,

  

We use only the jquery. dragsort-0.5.2.js file inside, you can also use the compressed version of min. js.
Ii. Instances
1. Use
Copy jquery. dragsort-0.5.2.js to the same folder as the jquery-2.1.3.min.js to create a new html page. Introduce these two js files. Note that jquery is introduced in dragsort. The related code is as follows:

 

1 <! DOCTYPE html> 2 

The two input values are li IDS (connected by ","), and the id values identify the order of the current group li. When dragging across groups, the values in the two inputs change accordingly. To achieve the effect of moving across groups. When you need to save it, you can directly use ajax to submit the two input values, and parse the data in the background and save it to the database.

2. The effect is as follows.

Download example: download.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.