Question: Respond to a click on the dragable item

If the user clicks on the item and does not hold the mouse key I would like to run some function.

Normally I would add an "onClick" handler to the element, but it seems like the listeners are colliding with that method.

I don't mind adding a delay to the start of the drag if that is necessary.

@ofirgellerSM

@ofirgellerSM You can find a solution to your problem here: #477

@ofirgellerSM

@ofirgellerSM The API allows constraining the activation via a delay or distance. Something like that:

// All of these are imported from '@dnd-kit/core'.

const sensors = useSensors(
  useSensor(PointerSensor, {
    activationConstraint: {
      distance: 8,
    },
  })
)

<DndContext sensors={sensors}>
  // […]
</DndContext>

 const pointerSensor = useSensor(PointerSensor, {
    activationConstraint: {
      distance: 0.01
    }
  })
  const mouseSensor = useSensor(MouseSensor)
  const touchSensor = useSensor(TouchSensor)
  const keyboardSensor = useSensor(KeyboardSensor)

  const sensors = useSensors(
    mouseSensor,
    touchSensor,
    keyboardSensor,
    pointerSensor
  )

this works perfectly with touch and drag

@awgv

@awgv's answer worked for me. But I encountered another problem. When I try to drag an element, the click functionality gets triggered and opens the popover component while also dragging the element. How can I avoid the click once a component is dragged?

@awgv

@awgv's answer worked for me. But I encountered another problem. When I try to drag an element, the click functionality gets triggered and opens the popover component while also dragging the element. How can I avoid the click once a component is dragged?

const {  isDragging } = useSortable();

<div onClick={() => { if(!isDragging){ console.log("click"); } }></div>

@awgv

@awgv's answer worked for me. But I encountered another problem. When I try to drag an element, the click functionality gets triggered and opens the popover component while also dragging the element. How can I avoid the click once a component is dragged?
const {  isDragging } = useSortable();

<div onClick={() => { if(!isDragging){ console.log("click"); } }></div>

The thing is shadcn's components are built on Radix, so the events gets triggered when the pointer is down, i.e. onPointerDown.

So I simply added this to the trigger component and the issue got resolved.

onPointerDown={e => e.preventDefault()}

@chirag-9121

@chirag-9121
Ideally you should do a strict isDragging check for whatever function is being called.
preventDefault() in general is not a good idea as it will completely block the bubble phase.
But depending on what you are doing, it might not have difference.

@chirag-9121

It works for me. Thanks @chirag-9121 🙏

Would be worth adding this solution clearly to the sortable docs 👍

feat(leads): promote 'cold' to active Kanban column + fix DnD drop op…

Navigation Menu

Repository navigation

Question: Respond to a click on the dragable item #591

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Question: Respond to a click on the dragable item #591

Description

Activity

vladluca commented on Jan 18, 2022

awgv commented on Jan 20, 2022

ani-ali commented on Jan 2, 2024

chirag-9121 commented on Sep 11, 2024

aboveyunhai commented on Nov 8, 2024

chirag-9121 commented on Nov 9, 2024

aboveyunhai commented on Nov 9, 2024

berksafran-wt commented on Dec 3, 2024

damassi commented on Dec 22, 2024

Metadata

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Issue actions