--- title: "JavaScript Drag and Drop Plugin" description: "This document introduces a JavaScript drag-and-drop plugin, a lightweight tool for creating sortable lists with interactive drag-and-drop functionality." source: https://jsuites.net/docs/drag-and-drop --- This script has approximately 1 KB `jSuites.sorting` 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. | | ondrop | Called upon dropping an item. The method signature is `ondrop(DOMElement, int from, int to, DOMElement, DOMElement, mouseEvent).` | ## Examples ### Sorting a HTML list Below is an example demonstrating how to use `jSuites.sorting` to make a list of items draggable: ```html ``` ```jsx import jSuites from "jsuites" import { useRef, useEffect } from 'react' import 'jsuites/dist/jsuites.css' function App() { const draggableElements = useRef(null); useEffect(() => { if (draggableElements.current) { jSuites.sorting(draggableElements.current, { ondrop: function() { console.log(arguments); } }) } }, []); const itemStyle = { padding: '5px', backgroundColor: '#FFF', borderRadius: '3px', marginBottom: '3px', fontSize: '16px', border: '1px solid gray', width: '50px'}; return (
); } export default App; ``` ```vue ``` ## Resources ### Working examples on JSFiddle [jsfiddle working example](https://jsfiddle.net/hodware/804t6qe2/) ## Related Tools - [LemonadeJS Sortable](https://lemonadejs.com/docs/plugins/sortable) - Reactive sortable lists with drag and drop