How to get position of object with interactjs?

Question

My endgoal is to have a sorting system of products, so I need a way to get the updated position and an identifier of the moved object. An example would be highly appreciated.

Answer 1

I use interact as well so I know what you mean. I try to help you.

So, you need to store every interact object, for example in a plain 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")

As you see, interact(...).draggable(...) returns object (named Interactable), which has method context() with returning type Node. The context method will return node, so we can store as a variable, like:

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]

For context() documentation, see https://interactjs.io/docs/api/Interactable.html#context