如何使用interactjs获取对象的位置？答案

【问题标题】：How to get position of object with interactjs?如何使用interactjs获取对象的位置？
【发布时间】：2021-01-24 08:01:47
【问题描述】：

我的最终目标是拥有一个产品分类系统，因此我需要一种方法来获取移动对象的更新位置和标识符。一个例子将不胜感激。

【问题讨论】：

请访问help center，使用tour查看内容和How to Ask。展示您尝试过的内容以及您遇到的问题。实际发布您的尝试的minimal reproducible example，注意输入和预期输出。
@pilchard，我没有找到办法，所以我来这里征求意见

标签： javascript interactjs

【解决方案1】：

我也使用交互，所以我知道你的意思。我会尽力帮助你。

因此，您需要存储每个交互对象，例如在普通对象中

function dragMoveListener(event) {
    var target = event.target;
    // keep the dragged position in the data-x/data-y attributes
    var x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx;
    var y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;

    // translate the element
    target.style.webkitTransform =
        target.style.transform =
        'translate(' + x + 'px, ' + y + 'px)';

    // update the posiion attributes
    target.setAttribute('data-x', x);
    target.setAttribute('data-y', y);
}

var products = {
    apple: interact("#apple" /* your own selector, name */).draggable({
        // enable inertial throwing
        inertia: true,
        // keep the element within the area of it's parent
        modifiers: [
            interact.modifiers.restrictRect({
                restriction: 'parent',
                endOnly: true
            })
        ],
        // enable autoScroll
        autoScroll: true,

        listeners: {
            // call this function on every dragmove event
            move: dragMoveListener,
        }
    }),
    banana: interact("#banana").draggable({
        // enable inertial throwing
        inertia: true,
        // keep the element within the area of it's parent
        modifiers: [
            interact.modifiers.restrictRect({
                restriction: 'parent',
                endOnly: true
            })
        ],
        // enable autoScroll
        autoScroll: true,

        listeners: {
            // call this function on every dragmove event
            move: dragMoveListener,
        }
    }),
    carrrot: interact("#carrot").draggable({
        // enable inertial throwing
        inertia: true,
        // keep the element within the area of it's parent
        modifiers: [
            interact.modifiers.restrictRect({
                restriction: 'parent',
                endOnly: true
            })
        ],
        // enable autoScroll
        autoScroll: true,

        listeners: {
            // call this function on every dragmove event
            move: dragMoveListener,
        }
    })
};

function getProductPosition(name) {
    const interactNode = products[name].context(); // returns the node
    return [interactNode.getAttribute("data-x"), interactNode.getAttribute("data-y")]
}

getProductionPosition("banana")

如您所见，interact(...).draggable(...) 返回对象（名为 Interactable），该对象具有方法 context()，返回类型为 Node。上下文方法会返回节点，所以我们可以存储为变量，比如：

const banana = interact("#banana").draggable({
    // enable inertial throwing
    inertia: true,
    // keep the element within the area of it's parent
    modifiers: [
        interact.modifiers.restrictRect({
            restriction: 'parent',
            endOnly: true
        })
    ],
    // enable autoScroll
    autoScroll: true,

    listeners: {
        // call this function on every dragmove event
        move: dragMoveListener,
    }
});

function getPosition(interactObject) {
    const interactNode = interactObject.context(); // returns the node
    return [interactNode.getAttribute("data-x"), interactNode.getAttribute("data-y")]
}

getPositionBanana() // => [x, y]

有关context() 的文档，请参阅https://interactjs.io/docs/api/Interactable.html#context

【讨论】：

这能得到产品列表中的坐标或实际位置吗？
坐标是什么意思？它将返回数组中的坐标，例如 [x, y]（例如 [201, 138]）。但这将返回实际位置。 PS：坐标在dragMoveListener()函数中更新。