InteractJs -将可拖动项目动态捕捉到父div中的基准线

Question

在下面的小提琴中，我让interact Js将子元素捕捉到某个点。

但是我在捕捉蓝色div的所有边以捕捉到父div的中心和x&y轴时遇到了问题。

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

下面是我的快照代码：

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

你能帮我弄清楚实现该功能的快照功能吗？

Answer 1

经过几次尝试，我找到了我需要做的事情。

我只是根据可拖动项的宽度和高度在拖动开始时计算动态坐标以进行捕捉。并将它们添加到捕捉修改器的target属性中。

这里是小提琴：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});
           
          }