🐛 Drag by the title is confusing

You can drag the title, which makes it seem like you are dragging the card, or potentially merging the cards. But you are doing neither, it only works when dragging from the body of the card (Chrome):

phabricator_drag_chrome

Firefox: https://giphy.com/gifs/S60MwAMqgvgQ95vkC4 (I can only upload 1 image in this Discourse)

Reproduction Instructions

  • Try to drag a “card” by its title.
  • The card seems to be dragging, since you get a: “popover” that looks like the card, and a (+) while moving around.
  • But the card is not being dragged, only the link is dragged, so you cannot really drop it anywhere.

Possible Solutions

I am not sure how to solve this, I tried some StackOverflow CSS solutions (sol 1, sol 2) to no avail. High-level possible solutions:

  • The whole card should act as a link block instead of it being some times a block and some times a container. This is slightly related to 🐛 Cannot copy task id.
  • Disable dragging of the link itself.

Phabricator/Arcanist Version

phabricator: 8f43c773b832ffa828d5ce07485908150283f459 (Apr 24 2019)
arcanist: 9830c9316d38988b2dc283ac1a124b73bc8e6c5f (Mar 7 2019)
phutil: 639e4b9cae284717b1ed717dd1e4d11c70744b86 (Apr 12 2019)

Some of this is just browser behavior when dragging any link. I’m hesitant to break that: users expect dragging a link to do something specific, and I’d like it to do that thing in the absence of strong reasons to deviate from default browser behavior.

Some of this is that we let you drag-and-drop images onto cards to set a cover image. That’s where the “+” icon and green background are coming from. If you drag-and-drop an image from your desktop, you’ll get a cover image:

28%20PM

I believe we can’t tell what you have on your cursor before you drop it, so we can’t distinguish between “you’re holding a link” and “you’re holding an image file”. Our behavior has to be the same in both cases.

Of course, we could raise an error if you drop something which isn’t a cover image onto a card. But I don’t see a clear way forward for the rest of this interaction that doesn’t break some part of link interactions, or remove the cover image interaction, or otherwise reduce the functionality of the link, or depend on browser behavior which I think doesn’t exist (support for distinguishing between different types of objects on the cursor).

users expect dragging a link to do something specific, and I’d like it to do that thing in the absence of strong reasons to deviate from default browser behavior

I strongly agree about not deviating from browser default behavior if possible. I think in this case from a combination of:

  • Phab uses cards-like UI
  • Child elements of the card are independently draggable
  • The popover looks like the task
  • The (+) makes it seem like it can be dropped there (it cannot)

So the problem is that it is not clear whether the user is dragging a link or a card itself. Personally I think it’s very confusing that the card and sub-elements of it are draggable independently but that’s another broader topic.

I don’t have a clear easy solution here, sorry for only bringing the bug.