score:0
Accepted answer
appendchild
always adds the item to the end of the target div
. you can do a simple calculation to identify the position to drop using children's positions (child.getboundingclientrect().bottom
) and mouse drop position (e.clienty
).
change the drop
handler as below
const drop = e => {
e.preventdefault();
const div_id = e.datatransfer.getdata("div_id");
const block = document.getelementbyid(div_id);
// get the child div index where to drop
let dropindex = array.from(e.target.children).findindex(
// find the first child index where
// a child bottom (vertical viewport height to the bottom of child div)
// is greater than mouse y position
child => child.getboundingclientrect().bottom > e.clienty
);
if (dropindex === -1) {
// drop at the end
e.target.appendchild(block);
} else {
// drop at start or in between
e.target.insertbefore(block, e.target.children[dropindex]);
}
};
<div id="app"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
const app = () => {
const drop = (e) => {
e.preventdefault();
const div_id = e.datatransfer.getdata("div_id");
const block = document.getelementbyid(div_id);
let dropindex = array.from(e.target.children).findindex(
(child) => child.getboundingclientrect().bottom > e.clienty
);
if (dropindex === -1) {
e.target.appendchild(block);
} else {
e.target.insertbefore(block, e.target.children[dropindex]);
}
};
const dragover1 = (e) => {
e.preventdefault();
};
const dragstart = (e) => {
const target = e.target;
e.datatransfer.setdata("div_id", target.id);
};
const dragover = (e) => {
e.stoppropagation();
};
return (
<div
style={{
display: "flex",
justifycontent: "space-between",
padding: "50px",
}}
>
<div
ondrop={drop}
ondragover={dragover1}
id="board-1"
style={{
border: "1px solid #222",
padding: 20,
}}
>
<div
id="firstfirst"
draggable
ondragstart={dragstart}
ondragover={dragover}
>
<div>
<h1>first column first row</h1>
</div>
</div>
<div
id="firstsecond"
draggable
ondragstart={dragstart}
ondragover={dragover}
>
<div>
<h1>first column second row</h1>
</div>
</div>
{array.from(array(2)).map((_, index) => {
return (
<div
key={index}
id={`first${index}`}
draggable
ondragstart={dragstart}
ondragover={dragover}
>
<h1>first column row {index}</h1>
</div>
);
})}
</div>
<div
id="board-2"
ondrop={drop}
ondragover={dragover1}
style={{
border: "1px solid #222",
padding: 20,
}}
>
<div
id="secondfirst"
draggable
ondragstart={dragstart}
ondragover={dragover}
>
<h1>second column first row</h1>
</div>
<div
id="secondsecond"
draggable
ondragstart={dragstart}
ondragover={dragover}
>
<h1>second column second row</h1>
</div>
{array.from(array(2)).map((c, index) => {
return (
<div
key={index}
id={`second${index}`}
draggable
ondragstart={dragstart}
ondragover={dragover}
>
<h1> second column row {index} </h1>
</div>
);
})}
</div>
</div>
);
};
reactdom.render(<app />, document.getelementbyid("app"));
</script>
Source: stackoverflow.com
Related Query
- How to drag and drop in between divs in reactjs?
- How to use drag and drop functionality both columns and rows in my React Table - ReactJS
- How to simulate a drag and drop action in puppeteer?
- How to test mousemove drag and drop with react-testing-library and framer-motion
- How to create dynamic drag and drop layout with react-grid-layout
- How do I simulate drag and drop in enzyme testcase?
- Drag and Drop in React.js. How to pass custom react component in setDragImage
- How can I prevent drag and drop images in a react app?
- How to implement Drag and Drop in Class based Component in react-dnd
- How can I drag and drop objects into a Mapbox map from outside the map?
- How to handle React Svg Drag and Drop with React Hooks
- how to update records after drag and drop
- ReactJS hooks - drag and drop with multiple useState hooks and styled-components
- How to better toggle between view and edit mode in reactjs
- How to drag and drop content with react?
- How to group GLTF element and drag and drop in 3js
- How to drag and drop canvas web element with selenium in chrome
- React-dnd - Not sure how to get drag and drop to fire for nested components of the same type
- Reactjs drag and drop
- How to prevent to open new tab when I drag and drop image on the Chrome browser in JavaScript?
- How is it possible my ReactJS component alternates between my old state and my new state?
- How to properly display message between sender and receiver in reactjs
- How to delegate rendering responsibility between ReactJS and ChartistJS for svg
- How to bind the selected option from the drop down to a reactjs state property in functional component and show it to side of the dropdown
- Swap two images by drag and drop in ReactJs
- How to drag and drop on antd tree table?
- How to use drag and drop in ant design?
- How do you use state variables to make a nested drag and drop in React / Kanban board not working in React
- How to save the state of drag and drop rows in React?
- How do I display a placeholder element at current insertion point during drag and drop operation?
More Query from same tag
- How to add 'Delete Post' functionality on list items with React & Redux?
- React Phone Number input format and Output without format
- react toastify with redux from axios API
- How can one tell the version of React running at runtime in the browser?
- Problem reaching Contentful's API with getEntry() helper: no content is returned from promise of found entry
- Typescript React. Destruct and spread object
- How do I add a query param to Router.push in NextJS?
- "ES7 React/Redux/GraphQL/React-Native snippets" is not working for javascript file. Do I need to configure something else than just installing it?
- Cannot GET /path using ReactJS, webpack, express
- React: "TypeError: undefined is not a function"
- Can't navigate to / and got undefined error instead
- React-i18next does not load translations on page reload
- Communication between two React form components with Redux
- JavaScript Mapping Object To Array
- State is undefined, when I setState() inside component did mount
- Passing value from a map function to a React component
- setTimeout function not executing at specific time given in react app
- Why does this React router NavLink either redirect or submit successfully but, not both?
- How to extend styled component with an arrow function
- Having problems with child div background color HTML Yahoo email
- React - prevent Form's onChange event from setting parent state until Enter key is hit
- i am using for loop in object in javascript, but one condition is creating issue
- React-router-dom push
- React Context: How do I pass an object array and display contents in Consumer?
- can't use the Refs properly in react js, Cannot read property of undefined
- How do I make ESlint less stringent while working with Prettier in a React project (with Material-UI)?
- All error messages printing if ONE of the inputs is wrong on form - React Form
- Introduced pagination into my react app. Works fine but getting some slowdown and unresponsive in-app navigation. Unmounted component warning
- Getting my React frontend to talk to my Express server
- Navbar Dropdown expands Nav instead of hovering over