InteractJs - Dynamic Snapping of draggable items to guideline in parent div

Question

In the below fiddle I have interact Js to snap the children element to a certain point.

But I am having trouble snapping all sides of the blue div to snap to center and x & y axis of the parent div.

JsFiddle: https://jsfiddle.net/n3wLb5vp/1/

Below is my snap code:

modifiers: [
        interact.modifiers.snap({
            targets: [
              { x: 195, range: 20 },
              { y: 228, range: 20 }],
              relativePoints: [{
                x: 0,
                y: 0
              }]
        })]

Could you please help me figure out snap function for achieving that functionality?

Answer 1

After a few trials I figured out what I need to do.

I am just calculating dynamic co-ordinates on start of drag for snapping based on the draggable item's width and height. and adding them to the target property of snap modifier.

Here is the fiddle: https://jsfiddle.net/a0knv69j/9/

let dynamicTargets = [];

.....
interact.modifiers.snap({
                        targets: dynamicTargets,
                        relativePoints: [{
                            x: 0,
                            y: 0
                        }]
                    })],
....
    onstart: function(event){
           let element = event.target;
           let element_width = parseInt(element.offsetWidth);
           let element_height = parseInt(element.offsetHeight);
           let element_half_width = parseInt(element_width / 2);
           let element_half_height = parseInt(element_height / 2);
           let x_axis = 395
           let y_axis = 228
           
           dynamicTargets.push({x: x_axis, range: 20});
           dynamicTargets.push({x: (x_axis - element_half_width), range: 20});
           dynamicTargets.push({x: (x_axis - element_width), range: 20});
           
           
           dynamicTargets.push({y: y_axis, range: 20});
           dynamicTargets.push({y: (y_axis - element_half_height), range: 20});
           dynamicTargets.push({y: (y_axis - element_height), range: 20});
           dynamicTargets.push({x: parseInt(x_axis),y: parseInt(y_axis), range: 40});
           
          }