如何使用interactjs獲取object的position？

Question

我的最終目標是擁有一個產品分類系統，所以我需要一種方法來獲取更新的 position 和移動的 object 的標識符。 一個例子將不勝感激。

Answer 1

我也使用交互，所以我知道你的意思。 我試着幫助你。

因此，您需要存儲每個交互 object，例如在普通 object

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(...)返回 object（命名為 Interactable），它具有方法context() ，返回類型為 Node。 context 方法將返回節點，因此我們可以將其存儲為變量，例如：

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