InteractJs - 可拖动项目的动态捕捉到父 div 中的指南

Question

在下面的小提琴中，我有交互 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

经过几次尝试，我想出了我需要做什么。

我只是根据可拖动项目的宽度和高度计算拖动开始时的动态坐标以进行捕捉。并将它们添加到 snap 修饰符的 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});
           
          }