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

Question

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

Answer 1

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

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

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(...) returns 对象（名为 Interactable），其方法 context() 具有 returning 类型节点。上下文方法将 return 节点，因此我们可以存储为变量，如：

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

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

How to get position of object with interactjs?

javascript

interactjs