Simple drag and drop with sorting without external library - reactjs

Question

I want to implement drag and drop of elements with sorting and I don't want to use any external library.
There will be 2 containers, I want to sort the elements within a container and drag/drop between the two containers. Any suggestions?
I've tried HTML5 and other things but didn't worked

Answer 1

In the above screen shot, I want to drag and drop the elements from shown to hidden and vice-versa, also sorting the elements among "Shown" row

Answer 2

/**
* Displays Dialog for Table show/hide columns
* #default {string} submitLabel, cancelLabel
* #default {bool} open
* #default {array} suggestions
*/
import React from "react";
import PropTypes from "prop-types";
import { withStyles } from "#material-ui/core/styles";
import SettingsIcon from "#material-ui/icons/Settings";
import IconButton from "#material-ui/core/IconButton";
import { theme } from "../../../../utilities/theme-default";
import HLTooltip from "../../../atoms/ToolTip";
import HLDialog from "../../../grouped/Dialog";
import HLSaveSettings from "../SaveTableSettings";
import HLTypography from "../../../atoms/Typography";
import HLChip from "#material-ui/core/Chip";
import * as colors from "../../../../utilities/color";
import Draggable from "react-draggable";
export const styles = () => ({
tableAction: {
width: "100%",
marginTop: `${theme.spacing.unit}px`
},
container: {
display: "flex"
},
title: {
flex: "0 0 auto"
},
section: {
border: `1px solid ${colors.neutralDark["120"]}`,
marginTop: `${theme.spacing.unit * 3}px`,
padding: `${theme.spacing.unit}px 0 ${theme.spacing.unit * 3}px ${theme
.spacing.unit * 6}px`,
display: "flex"
},
chipTextStyle: {
marginTop: `${theme.spacing.unit * 4}px`
},
chipStyle: {
padding: `${theme.spacing.unit * 3}px`,
marginTop: `${theme.spacing.unit}px`
},
dialogStyle: {
width: "500px"
},
defaultSection: {
marginTop: `${theme.spacing.unit * 2}px`
}
});
/**
* state component which handles table show/hide columns
*/
export class HLShowHide extends React.Component {
state = {
open: false,
headers: this.props.headers
};
/**
* function to display dialog for show/hide opetations
*/
dialogToggle = () => {
this.setState({
open: !this.state.open
});
};
onStart() {
this.setState({ activeDrags: this.state.activeDrags + 1 });
}
onStop() {
this.setState({ activeDrags: this.state.activeDrags - 1 });
}
onDragStart = (e, sectionIndex, index) => {
e.stopPropagation();
this.draggedItem = this.state.headers.sections[sectionIndex].items[index];
this.dragItemSection = sectionIndex;
this.dragItemIndex = index;
e.dataTransfer.effectAllowed = "move";
e.dataTransfer.setData("text/html", e.target.parentNode);
e.dataTransfer.setDragImage(e.target.parentNode, 20, 20);
};
onDragOver = (sectionIndex, index) => {
const draggedOverItem = this.state.headers.sections[sectionIndex].items[
index
];
// if the item is dragged over itself, ignore
if (this.draggedItem === draggedOverItem) {
return;
}
if (this.dragItemSection !== sectionIndex) {
var otherItems = this.state.headers.sections[this.dragItemSection].items;
otherItems.splice(this.dragItemIndex, 1);
}
// filter out the currently dragged item
let items = this.state.headers.sections[sectionIndex].items.filter(
item => item !== this.draggedItem
);
// add the dragged item after the dragged over item
items.splice(index, 0, this.draggedItem);
const sections = this.state.headers.sections;
sections[sectionIndex].items = items;
sections[this.dragItemSection].items = otherItems;
this.setState({ headers: { ...this.state.headers, sections } });
};
onDragOverSection = sectionIndex => {
if (this.state.headers.sections[sectionIndex].length === 0) {
var otherItems = this.state.headers.sections[this.dragItemSection].items;
otherItems.splice(this.dragItemIndex, 1);
let items = this.state.headers.sections[sectionIndex].items;
items.push(this.draggedItem);
const sections = this.state.headers.sections;
sections[this.dragItemSection].items = otherItems;
sections[sectionIndex].items = items;
this.setState({ headers: { ...this.state.headers, sections } });
}
};
onDragEnd = () => {
this.draggedIdx = null;
};
render() {
const { classes, submitLabel, cancelLabel } = this.props;
const { open, headers } = this.state;
const dragHandlers = {
onStart: this.onStart.bind(this),
onStop: this.onStop.bind(this)
};
const dialogBody = (
<div className={classes.dialogStyle}>
{headers.sections.map((section, sectionIndex) => (
<div className={classes.section}>
<span className={classes.chipTextStyle}>
<HLTypography
variant={
theme.palette.tableConstant.showHideColumn.sections.variant
}
color={
theme.palette.tableConstant.showHideColumn.sections.color
}
>
{section.label}
</HLTypography>
</span>
<span onDragOver={() => this.onDragOverSection(sectionIndex)}>
{section.items.map((item, itemIndex) => (
<div
className={classes.chipStyle}
key={item.value}
data-id={`${itemIndex}_${sectionIndex}`}
onDragOver={() => this.onDragOver(sectionIndex, itemIndex)}
>
<Draggable
onDrag={this.handleDrag.bind(this)}
{...dragHandlers}
>
<HLChip label={item.label} />
</Draggable>
</div>
))}
</span>
</div>
))}
<div className={classes.defaultSection}>
<HLSaveSettings
defaultLabel={headers.defaultLabel}
isDefault={headers.isDefault}
/>
</div>
</div>
);
return (
<React.Fragment>
{open && (
<div className={classes.container}>
<div className={classes.tableAction}>
<HLDialog
open={open}
submitLabel={submitLabel}
cancelLabel={cancelLabel}
bodyText={dialogBody}
maxWidth="xl"
onSubmit={() => {}}
onCancel={() => {
this.dialogToggle();
}}
/>
</div>
</div>
)}
{!open && (
<React.Fragment>
<HLTooltip title="Settings" placement="top">
<IconButton aria-label="Settings">
<SettingsIcon onClick={this.dialogToggle} />
</IconButton>
</HLTooltip>
</React.Fragment>
)}
</React.Fragment>
);
}
}
HLShowHide.propTypes = {
classes: PropTypes.object,
headers: PropTypes.arrayOf().isRequired,
open: PropTypes.bool,
submitLabel: PropTypes.string,
cancelLabel: PropTypes.string
};
HLShowHide.defaultProps = {
open: false,
submitLabel: "Set",
cancelLabel: "Cancel"
};
export default withStyles(styles)(HLShowHide);
my code which I tried

Answer 3

You can assign onDrop and onDrag events to div. You can hold each component in an array and when you drag you can remove the item from and array and when you drop, you can add this item to array. After that you can sort the array by array.sort()
<div onDrag={this.handleDrag()} onDrop={thishandleDrop()}>
handleDrag = () => {
//remove your item in array here
}
handleDrag = () => {
//add your item to array here
}