TASK: Make options in a mutliselectbox draggable

[johannessteu]

Fixes #774

[johannessteu]

What i did:

• add dnd to mutliselectbox component
• therefore i introduced a state to make the "hover" effect visiable and the options will reorder if you hover another option
• it's based on the dnd demo/docs

This is how it looks like right now
http://recordit.co/1hMP6XsvVD

What i'm unsure about:

• is it possible to import the dndTypes from the neos-ui package? Should we add the dependency here or just create a new type const? Right now i just use a string wich needs to be adjusted. But i'm not 100% sure about how to solve this
• naming?!
• should we move the new RenderableOption Component in a seperate file? Do we/could we need it for other components as well?

[dimaip]

Would be great to add some visual clue (affordance as those UX freaks call it) that the list items are draggable. Our editors never knew you could actually sort those lists before I told them...
Maybe option A or C?

[dimaip]

Would be great to restrict the drag motion to Y axis and within the bounds of the component, but I know it's know easy with html5 dnd api, is it?

[dimaip]

Can you show the new screenshot?

Also interesting what GH does on hover:

[johannessteu]

http://recordit.co/ynUfLULi6f

Yeah, i do like the 2nd icon as well. But we have different icons for the nodetypes

[johannessteu]

We could also maybe "disable" all other options with another grey color to trigger a more active state on the current item. I don't think that we have enough space for another icon next to the nodetype icons.

[dimaip]

Maybe use the up and down arrow instead of the 4-way pointing arrow, since you can only move it up and down?
Also would be excellent if you could make so that node would not get duplicated on dragging. I know it's not super easy to do with html5 dnd api, but react-dnd should provide some helpers for that I think.

[johannessteu]

I tend actualy to this 3 stripes icon do indicate it's a draggabel list, just like GH does. I'll check the dragging issue as well

[johannessteu]

Updated it @dimaip http://recordit.co/M8tbLNFrYK

[dimaip]

Looks good to me now, thanks!

[dimaip]

You rock!