Pushpin: Disable drag events for certain cards

Created on 3 Jun 2019  ·  9Comments  ·  Source: automerge/pushpin

I'm trying to implement a slider control on a new card type, but it seems impossible to stop the drag event propagation. As a result, when I try to move the slider, the whole card drags instead. There needs to be a way to tell the parent card to (temporarily) disable dragging and resizing of the card.

Most helpful comment

Not too sure what's going on and can't look till I clear my plate of this other stuff. I recently vendored in react-draggable as part of the upgrade branch and deleted most of it. It's real simple if you want to rummage around in there.

All 9 comments

@canadaduane can you call .preventDefault? Take a look at how keypress handling works around the backspace key between text-editor and board. That might be a clue how we could progress here.

Yes, I tried both preventDefault and stopPropagation (on onDrag as well as other variants, such as onStart and onDragStart just to be sure). I'm not particularly familiar with react-draggable and DraggableCore though, so I may be missing something.

Not too sure what's going on and can't look till I clear my plate of this other stuff. I recently vendored in react-draggable as part of the upgrade branch and deleted most of it. It's real simple if you want to rummage around in there.

Here is a WIP of the "Let's Decide" content card I'm adding. To get to the state where the sliders show, you need 3 users, & each user needs to click the "Ready to Vote?" thumbs up button. (Someone also must add at least one idea, and the idea must move to the "Proposals" section).

https://github.com/canadaduane/pushpin/tree/decision-content

Can you give me steps to reproduce whatever the current problem is? I can't promise I'm going to fix it but I'm open to a PR and would at least like to take a glance.

Ok, here is a new version that works on our new "upgraded" master branch:

https://github.com/canadaduane/pushpin/tree/upgrade-decision

Just create a "Let's Decide" card, and then try moving the knob on the slider.

Thinking about this further... I tried highlighting text in a "text" card noticed that it drags as well. I wonder if a better approach would be to make cards into mini-windows with draggable header bar, rather than make the whole card draggable.

That's what we tried on Farm -- it has some benefits, but it consumes a lot
of scarce screen real-estate and is UX chrome I'd rather do without if at
all possible.

On Mon, Jun 10, 2019 at 8:11 AM Duane Johnson notifications@github.com
wrote:

Thinking about this further... I tried highlighting text in a "text" card
noticed that it drags as well. I wonder if a better approach would be to
make cards into mini-windows with draggable header bar, rather than make
the whole card draggable.


You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/inkandswitch/pushpin/issues/200?email_source=notifications&email_token=AAAAWQG5HXPWLFF45VQVH53PZZVKTA5CNFSM4HSHYYSKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODXKE7GA#issuecomment-500453272,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAAAWQCPU4MNJTAOXGXDQCTPZZVKTANCNFSM4HSHYYSA
.

--
Peter van Hardenberg
San Francisco, California
"Everything was beautiful, and nothing hurt."—Kurt Vonnegut

I agree it's clunky UX chrome. Hopefully there will be some kind of middle-ground we can discover--for example, as we make columns work, perhaps dragging will be less necessary and we can hide draggable handles behind a "drag mode." Just brainstorming. In the meantime, maybe we can figure out how to temporarily disable dragging ;)

Was this page helpful?
0 / 5 - 0 ratings

Related issues

Gozala picture Gozala  ·  9Comments

radio-alice picture radio-alice  ·  7Comments

edrex picture edrex  ·  7Comments

Gozala picture Gozala  ·  4Comments

pvh picture pvh  ·  4Comments