Drag Project

[Preetiaarya]

Expected outcome :-----
user should be able to click on that div and move it into another div. Anytime user dragged div is on top of another div, the underlying div should change its background color. When the drag stops, if user div is within the boundary of any of the 5 divs, it should be moved inside the category div.

Steps to produce:-----
a. create div
b. change position of div
c. Made the Div drag able using mouse move and mouse down
d.create 5 new div in html
e.when I dragged div is on top of another div then change its background color but when stop drag then drag div take a fix position

Actual outcome: I want to set the position of drag Div when drag Div overlap category Div

[dennyabrain]

Expected Outcome

When a user finishes dragging the div, it should remain within the container div

Actual Outcome

When a user finishes dragging the div, it goes back to the original position at the top left of screen.

In your "mouseup" listener on line 43, you are supposed to set the position of the dragDiv. Your code looks like this

const centerX = currentDivRect.width / 2 - dragDiv.offsetWidth / 2;
const centerY = currentDivRect.height / 2 - dragDiv.offsetHeight / 2;

It should be something like this

const centerX = currentDivRect.left
const centerY = currentDivRect.top