InteractJs

Question

在下面fiddle我有交互Js将子元素对齐到某个点。

但我无法捕捉蓝色的所有边 div 以捕捉到中心和父 div 的 x 和 y 轴 div。

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

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

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

这是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});
           
          }

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

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

javascript

drag-and-drop

interact.js