Navigation menu drag & drop

[ErisDS]

This is part of the Navigation epic: #4535, and requires #4537 & #4539

---

Clicking on the drag handles should allow the user to use drag and drop to reorder the items in the list. The items shouldn't lose any data, and the trash icons should work correctly after dragging.

The reordering doesn't need to save until the save button is pressed.

Notes on the interface:

• Cursor state for drag handles should be "move" - there should be no other hover state for drag handles.
• There should be no special highlight or state when a nav-item is being dragged
• Grab handles and trash icons should have padding around them for increased hit area

[delgermurun]

@ErisDS I think it is also requires #4539?

[ErisDS]

Good point, updated

[JoshKaufman]

I'm new here looking to get involved. is this ready to be worked on?

[PaulAdamDavis]

Hi @JoshKaufman, and welcome!

This issue is blocked on me finishing #4694 :(
I hope to get it done in the next couple days though.

[PaulAdamDavis]

Hello again @JoshKaufman, if you're still interested in getting involved, this issue is good to go now :)

[tidyui]

A simple question on this issue. What's the browser compability guidelines for the ghost admin and what is the prefered technology for implementing the drag-n-drop feature.

[PaulAdamDavis]

We generally support the last 2 versions of major browsers, so IE10+ (the rest update automatically or new versions have a majority market share, so a non-issue). Can I Use says no mobile browser supports native drag & drop events, so they'll need a polyfill. I would imagine most polyfills aim to support as many browsers and devices as possible.

I think keeping it as close-to-the-metal as possible would be best, and likely the easiest to integrate with Ember? Native drag & drop (with a polyfill) makes sense to me.