A React drag and drop sortable list is a user interface pattern where a list of items can be rearranged by dragging and dropping them into a different order. Drag and drop sortable list is a common pattern in many applications, such as task managers, to-do lists, and e-commerce sites.
React JS is a popular JavaScript library for building user interfaces. It provides a declarative way of building UI components using a component-based architecture.
Drag and Drop sortable list in React functionality is not built into React JS, but there are several libraries available that make it easy to add drag and drop functionality to React JS applications.
React Drag and Drop Sortable List
To create a drag and drop sortable list in React JS using React DnD, you need to define a list of items and use the Draggable and Droppable components to define the draggable items and the area where they can be dropped, respectively.
You also need to define a function that updates the order of the items when an item is dropped, and pass it to the DragDropContext component.
See the Pen Untitled by backlinknn (@backlinknn) on CodePen.
Overall, react js drag drop sortable lists are a powerful and intuitive way to allow users to interact with lists of items, and React DnD makes it easy to implement this functionality in React JS applications.
Drag and Drop sortable list in React
Below is the code required to create a React Drag and Drop Sortable List. You can run these codes in the browser.
Drag and Drop Elements Using JavaScript & CSS
This Drag and Drop Sortable List is very simple and not much css is used here. You can design this React Drag and Drop Sortable List using css as you like.
HTML of Drag and Drop sortable list
<div id='list'></div>
<script type="litespeed/javascript" data-src='https://cdnjs.cloudflare.com/ajax/libs/react/16.8.5/umd/react.production.min.js'></script> <script type="litespeed/javascript" data-src='https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.5/umd/react-dom.production.min.js'></script> <script type="litespeed/javascript" data-src='https://cdnjs.cloudflare.com/ajax/libs/react-sortable-hoc/0.9.0/react-sortable-hoc.min.js'></script>
CSS of React Drag and Drop sortable list
* {
font-family:arial;
}
UL, LI {
padding:0;
margin:0;
}
LI {
list-style:none;
line-height:50px;
background-color:#eee;
border-bottom:1px solid #ccc;
padding-left:1em;
}
Output1:
Drag Drop sortable list React Js
function _defineProperty(obj, key, value) {if (key in obj) {Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true });} else {obj[key] = value;}return obj;}var Sortable = SortableHOC;
var SortableContainer = Sortable.SortableContainer;
var SortableElement = Sortable.SortableElement;
var arrayMove = Sortable.arrayMove;
const SortableItem = SortableElement(({ value }) => React.createElement("li", null, value));
const SortableList = SortableContainer(({ items }) => {
return (
React.createElement("ul", null,
items.map((value, index) =>
React.createElement(SortableItem, { key: `item-${index}`, index: index, value: value }))));
});
class SortableComponent extends React.Component {constructor(...args) {super(...args);_defineProperty(this, "state",
{
items: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5', 'Item 6'] });_defineProperty(this, "onSortEnd",
({ oldIndex, newIndex }) => {
this.setState(({ items }) => ({
items: arrayMove(items, oldIndex, newIndex) }));
});}
render() {
return React.createElement(SortableList, { items: this.state.items, onSortEnd: this.onSortEnd });
}}
ReactDOM.render( React.createElement(SortableComponent, null), document.getElementById('list'));
Final Output:
Conclusion:
Hopefully, you have been able to create this React Drag and Drop sortable list using the above codes. This is a basic design so you can customize it as you like using css.
