chrisjpatty / react-dragtastic Goto Github PK

I need to access attributes of dragState in some of the callbacks, e.g. onDrop, but the callbacks either receive no arguments or dragState.data. Would you be open to passing dragState to all onX callbacks?

This issue is intended to track progress on version 3.

The main goals for version 3:

• Add new hooks API
• Clear up any existing issues as of the creation of this ticket
• Full Mobile Support
• Better performance

Currently the components don't test if they're mounted before firing a setState. This leads to an occasional case where components throw React's setState error. Each component should internally track their mounted state as described here

Hello!

Before anything else: thanks for this great library! I spent so much time looking for a way to cleanly handle d&d I started to believe there was no easy way.

I would very much like to use this on my TypeScript projects, but I noticed there is no type definition published for it on DefinitelyTyped, so I took the liberty of translating the .js.flow file to a TypeScript module and made a pull request (you can find it here).

I hope this is OK with you and, of course, if you want to review the pull request and add your own feedback, it would be very welcome.

Best regards.

Currently the drag delay, when set to 0, is working as if the drag delay is set to 1. Meaning, the user has to move one pixel to activate the draggable.

Hi Chris,

I can't seem to make the library work for mobile. Dragging is fine in most devices I tried, but it seems like no event gets fired once I drop a draggable on a droppable.
I was preparing a code example, but seems like the demo site examples don't work for me either, so you could check from there.

Is there any workaround to make the events work (I only need the onDrop event) or perhaps some extra configuration (like the pointer-events: none) that would work for mobile?

Thanks.

Property isOver is missing in object type [1].

I have a large Droppable which has multiple smaller Droppables inside of it. Either are valid targets.

Once the mouse moves into the parent Droppable, isOver gets set to true. Once the mouse moves into a child Droppable, isOver on the parent gets set to false, and isOver on the child gets set to true, as you'd expect. However, when I move out of the child (and the cursor is still within the parent), then my parent does not get isOver set back to true.

Any thoughts? Thanks.

My parent droppable is very straightforward:

<Droppable id={date} accepts={ACCEPTS} onDrop={this.handleDrop}>
        {dragState => {
          return (
            <div {...dragState.events}>
              <Day
                {...this.props}
                isHoveredOver={dragState.isOver}
              />
            </div>
          );
        }}
      </Droppable>

If you've started dragging, pressing escape should cancel a drag.

I've found in my use-case scenarios that it would be nice to pass a boolean prop to the <Draggable/> that could disable it. This is especially useful in cases where a child of the Draggable also needs to be able to handle click or tap events.

I have a basic a calendar where each Day is a Droppable. However if I drag an item onto any day, then ALL Droppables think isOver is true, when only the Droppable I'm hovering over should have isOver === true.