Muuri: Trigger On Click Event

[nvacheishvili]

I cannot find any information about how I can trigger a function on click of muuri draggable item.
I can determine when the user double clicks but is there any way to do an action on one click?
As I saw the documentation does not mention it - any workarounds?

[codelikeanartist]

What I got from the GRID example is the following: you have to set up an element as part of the dragable item with an id. Then in dragstartpredicate, you check for that id and prevent the dragging if that element is clicked. Instead, you do some other action. This works for my "webCollage" (or digital flip chart) lkie so:
dragStartPredicate: function (item, event) {
let isRemoveAction = elementMatches(event.target, '.item-remove');
let isZoomAction = elementMatches(event.target, '.item-zoom');
let e = item.getElement()
if (isRemoveAction) {
console.log("remove item: ", e.id)
removeItem(e)
}
if (isZoomAction) {
console.log("zoom item: ", e.id)
zoom(e.id)
}
if (isZoomAction) console.log("zoom item", e.id)
return (!isRemoveAction && !isZoomAction) ? Muuri.ItemDrag.defaultStartPredicate(item, event) : false;
}
See https://github.com/codelikeanartist/webCollage/blob/master/js/custom.js
Or, look at Haltu's grid example directly

[niklasramo]

@nvacheishvili yep, element.addEventListener('click', (e) => {}) won't work on the item element if it's configured to start dragging immediately. You can, however, listen to e.g. pointerdown/pointerup events and/or mousedown/mouseup events and do your custom deductions using those listeners. I think touchstart and touchend should work also.

What @codelikeanartist suggests works too depending on your use case. Basically if you return false from the dragStartPredicate _immediately_ based on some condition click events should work.