Limiting Dragged Element's Movement to Parent

JavaScript
1

I’m trying to keep the dragged element from going outside of its parent by using conditions in an If statement.

The following are the conditions I tried to use where “el” is the element being dragged and its parent is el.parentNode.

if (el.parentElement.offsetTop > el.offsetTop && el.offsetBottom > el.parentElement.offsetBottom &&
el.offsetLeft > el.parentElement.offsetLeft && el.parentElement.offsetRight > el.offsetRight)

Unfortunately offsetRight and offsetBottom do not exist thus my script does not work. I noticed that when I drag an element it’s parentTop changes instead of staying the same. My other concern is even if I am able to get all 4 positions (top, bottom, left, right) for both the dragged element and its parent I’m not sure if they will be updated while the element is being dragged.

2

You can use offsetWidth and offsetHeight of the parent element to calculate its borders.

offsetBottom = offsetTop + offsetHeight - 1
offsetRight = offsetLeft + offsetWidth - 1
3

Hi Thallius,
Thanks for your response. I have incorporated your suggestion in to my script but it doesn’t seem to work. I can still drag my DIVs outside their containers.

I think the variables that I used in my if statement conditions do not get updated as the DIVs are being dragged that’s why my script is not working as intended.

Please see my code here

4

The code is ok but you forget to add a let before the variable declaration. If you add the two let it works like expected.
The only issue is, that it then gets stuck at the border.
Maybe you can find the solution for this by your self.
If not come back to me.

Just a little hint: You are testing if the old position is at the border not the new one after the move.

5

Hi Thallius, I guess I’m not entirely sure why there is a minus 1 in the following line of code.

let pOffsetBottom = el.parentNode.offsetTop + el.parentNode.offsetHeight - 1;

Is it to cancel out the value of el.parentNode.offsetTop? Also if the value of el.parentNode.offsetTop is 10 would I need to subtract 10? I’m still not able to limit the drag area of the DIV to the parent DIV.

6

The -1 is easy.

Let’s assume you have a recht of 3x3 pixel where you can move your child. Let’s assume this rect is at position top = 0. because you have 3 pixel, the bottom pixel is at position bottom = 2 (0, 1, 2)
Therefor the bottom is top + height - 1 => 0 + 3 - 1 = 2

7

Ahh, that’s because for n number of pixels, the first is 0, the second is 1, the third is 2, and so on, where the nth pixel has an index number of n-1.

Row | Index
1st  | 0
2nd  | 1
3rd  | 2
4th  | 3
...  | ...
nth  | n-1

Because the height is the number of pixels, that height is always 1 more than the zero-based pixel index. That’s why you need to subtract 1 when transitioning from width or height to pixel index, and vice-versa add one when going from pixel index to width or height.

8

I seem to recall reading that drag and drop are system controlled. You can only control where the dragged item will be dropped.
But there is a way to achieve what I think you want.
The first answer to this stackoverflow question with a click event should do what you want

9

Thanks for your reply, I’ll definitely check this out.

10

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.