Scribd
Upload
3 views4 pages

26 - JavaScript Drag and Drop Plugin

The document describes the jSuites.sorting JavaScript plugin, which enables the creation of sortable lists through a drag-and-drop interface. It includes methods for handling drag events such as ondragstart, ondragend, and ondrop. An example is provided to demonstrate how to implement the plugin with HTML and JavaScript.

Uploaded by

Lâm Trần
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
3 views4 pages

26 - JavaScript Drag and Drop Plugin

The document describes the jSuites.sorting JavaScript plugin, which enables the creation of sortable lists through a drag-and-drop interface. It includes methods for handling drag events such as ondragstart, ondragend, and ondrop. An example is provided to demonstrate how to implement the plugin with HTML and JavaScript.

Uploaded by

Lâm Trần
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

09:48 7/6/26 JavaScript Drag and Drop Plugin

menu

Documentation keyboard_arrow_right Drag and drop

Draggable list
This script has approximately 1 KB

[Link] is a compact JavaScript solution for creating user-friendly sortable lists. It


allows for easy reordering of list items through a simple drag-and-drop interface.

Documentation
Methods
The plugin offers several event-driven methods to interact with the draggable elements:

Method Description

ondragstart Called when dragging starts.

ondragend Called when dragging ends.

Called upon dropping an item. The method signature is ondrop(DOMElement, int from,
ondrop
int to, DOMElement, DOMElement, mouseEvent).

Examples
Sorting a HTML list
Below is an example demonstrating how to use [Link] to make a list of items
draggable:

[Link] 1/4
09:48 7/6/26 JavaScript Drag and Drop Plugin

Test 1
Test 2
Test 3
Test 4

[Link] 2/4
09:48 7/6/26 JavaScript Drag and Drop Plugin

<html>
<script src="[Link]
<link rel="stylesheet" href="[Link]
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>
[Link]([Link]('draggable-elements'), {
ondrop: function() {
[Link](arguments);
}
});
</script>

<style>
#draggable-elements li {
background-color: #FFF;
padding: 3px;
margin-bottom: 3px;
border-radius: 3px;
font-size: 16px;
}
</style>
</html>

Resources
Working examples on JSFiddle
[Link] 3/4
09:48 7/6/26 JavaScript Drag and Drop Plugin

jsfiddle working example

Related Tools
LemonadeJS Sortable - Reactive sortable lists with drag and drop

[Link] 4/4

You might also like