Star

Draggable list

This script has approximately 1 Kbyte

The jSuites.sorting is a lightweight JavaScript to create sortable lists with events. You can drag of of the following items in the list below to re-order the elements.

  • Test 1
  • Test 2
  • Test 3
  • Test 4


Source code

<html>
<script src="https://jsuites.net/v4/jsuites.js"></script>
<link rel="stylesheet" href="https://jsuites.net/v4/jsuites.css" type="text/css" />

<ul id='draggable-elements' class='cursor'>
    <li>Test 1</li>
    <li>Test 2</li>
    <li>Test 3</li>
    <li>Test 4</li>
</ul>

<script>
jSuites.sorting(document.getElementById('draggable-elements'), {
    ondrop: function() {
        console.log(arguments);
    }
});
</script>
</html>

Methods

Method Description
ondragstartCall the method when drag starts
ondragendCall the method when drag ends
ondropCall the method on the drop. ondrop(DOMElement, int from, int to, DOMElement, DOMElement, mouseEvent)


Resources

Jfiddle Working example