Restricting a drag with parent as origin.

[Gazoo101]

I'm trying to set a drag restriction with the origin of co-ordinates as the parent element, e.g. a 50x50 div inside of a 200x200 div, which can only move within a 100x100 area of the larger 200x200 div.

I've come across the .origin() function, but it doesn't appear to apply to the drag restriction I set. For example when I define:

const restrictSetting = interact.modifiers.restrict({
    restriction: { x: 0, y: 0, width: 100, height:100 }
});

this ends up restricting the small 50x50 div to the top-left corner of the page instead. Anyone else had any luck with using relative co-ordinates for drag restrictions?

[dylanzenner]

Have you tried using the restrictRect modifier?

interact('.draggableContainer').draggable({
  allowFrom: '.grip',
  modifiers: [
    interact.modifiers.restrictRect({
        restriction: '.parentContainer',
        endOnly: true,

    })
  ],
  inertia: true,
  listeners: {
    move (event) {
        position.x += event.dx
        position.y += event.dy

        event.target.style.transform = `translate(${position.x}px, ${position.y}px)`
    },
  }
})

[Gazoo101]

I appreciate the example code @dylanzenner . However, the example you provide restricts the draggable element to the entire parent container. As stated in my initial post, I'm interested in trying to restrict the dragging to a sub-section of the parent, e.g. the top left 100x100 of a 200x200 parent container for at 50x50 draggable element.

I have tried using the restrictRect modifier but have been unable to make it consider the parent as the origin of co-ordinates.

So far, I work-around the problem by re-calculating absolute view port co-ordinates and pass these to InteractJS via restrictRect, but it'd be far preferable to pass it co-ordinate relative to the parent instead.

[dylanzenner]

@Gazoo101 Are you able to add another div to the parent container that you can restrict the 50x50 div to?

Here is a fiddle link: https://jsfiddle.net/5oLsnzcj/3/

basically what you could do is "nest" 3 containers to achieve this and if you need the 100x100 div to not interfere with other items on your page you could position it absolutely in the top left corner. This way you have a way to use restrictRect to constrain the 50x50 div to the 100x100 div.

If this still does not work for you let me know

[Gazoo101]

@dylanzenner I appreciate your on-going dialogue with me about this, and your patience. My paid work gives me a bit less time these days, so I bare with me if I don't answer for a bit.

I also appreciate the example. In most cases I use a parent Div as this works exactly as you describe. In this particular instance, the elements I want to drag limit eachother. Imagine 3 boxes on a single axis, none of which can be dragged passed eachother, but limit eachothers positioning. If I used a parent div to restrict each of the 3 boxes, I'd instead be faced with the new problem of resizing these 3 parent divs. Hence why relative co-ordinates to restrict dragging would be the most straight-forward approach as far as I know.