Create Draggable & Sortable List In jQuery - Dragsort

Create Draggable & Sortable List In jQuery - Dragsort
File Size: Unknown
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

dragsort is a simple, configurable jQuery sortable plugin which enables items inside an html list to be sorted via drag and drop. You're able to sort items between 2 html list and save sort order in an input field which can be retrieved on the server on postback.

Basic usage:

1. Include the jQuery dragsort's script after jQuery library and you're ready to go.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jquery.dragsort.js"></script>

2. Create a hidden input field to save the sort order:

<input name="list1SortOrder" type="hidden">

3. Call the function with some options to enable the draggable & sortable functionalities on your html list:

$("#list1, #list2").dragsort({ 
  dragBetween: true, 
  dragEnd: saveOrder
});
    
function saveOrder() {
  var data = $("#list1 li").map(function() { return $(this).children().html(); }).get();
  $("input[name=list1SortOrder]").val(data.join("|"));
};

4. All default plugin settings.

$("ul").dragsort({ 

  // selectors
  itemSelector: "",
  dragSelector: "",
  dragSelectorExclude: "input, textarea",

  // dragEnd function
  dragEnd: function() { },

  // allows to drag between 2 lists
  dragBetween: false,

  // custom placeholder when dragging
  placeHolderTemplate: "",

  // the css selector of the element you want to scroll
  scrollContainer: window,

  // custom scroll speed
  scrollSpeed: 5
  
});

This awesome jQuery plugin is developed by mcm-ham. For more Advanced Usages, please check the demo page or visit the official website.