Drag and Drop Interaction Ideas

Some ideas for drag and drop interactions in a UI. The idea is to show a droppable area that stands for certain actions after an element is being dragged.

DragDropInteractions

View demo Download source

Sometimes we wonder how to pack all those possible actions into a UI. From buttons to drop-downs to menus—there are certainly many possibilities. Another idea is to employ some kind of drag and drop interaction. Today we want to share some explorations in these kind of interactions with you. The idea is to allow to drag an item and then show some droppable area that stands for certain actions. This saves a lot of UI space and gives an interesting dynamic to interactions. There are many applicable scenarios; think of categorizing and organizing content (i.e. like the Pinterest boards) or performing any type of actions (like in mail apps or in content management systems).

The demos are just some experimental ideas of how these kind of interactions can be imagined. We’ve based our demo script on Draggabilly by David DeSandro, and extended some of the behavior, i.e. allowing to scroll and treating drop actions. There are also other libraries out there, like for example jQuery UI but Draggabilly is very solid and it supports touch and multi-touch, which is really great. We’re also using Font Awesome for the icons and based the box-shadow expansion effect in the icon demo on the one seen in Palettab, an awesome Chrome extension that will give you color inspiration with every fresh tab.

Please note that this is highly experimental and we only tested it in the latest browser versions.

Have a look at a GIF of one of the demos:

DragDropInteraction

We hope you enjoyed this experiment and find it inspirational!

View demo Download source

Previous:
Next:

Tagged with:

ML is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

View all contributions by

Website: http://www.codrops.com

Related Articles

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start leanirng CSS now.

Feedback 74

Comments are closed.
  1. 3

    Great concepts again and very smooth. I like how the drop areas appear instead of having them on screen all the time. I guess this is CSS3 based as well?

  2. 4

    Really great effects. I liked the “modal” and the “bottom area” the most. Great stuff.

  3. 8

    Mary Lou, preciso te dizer que isso está incrível.

    Sempre acompanho o Codrops e todos os posts são ótimos, sempre com exemplos fantásticos, mas você superou!

    De coração, parabéns pelo trabalho de hoje e de sempre!

    Grande abraço!

  4. 15

    Revolutionary, fresh and inspiring ! in this web happens the new web design. Congratulations and thx for sharing.

  5. 17

    For some effects, user can’t choose to “un-drop” an item because there is no place to drop outside.
    It could be nice to always have a drop zone to cancel.

  6. 18

    Only a few are really applicable to the real world but it’s nice to see some experimentation in this realm.

  7. 20

    Best yet! Been working on something similar to this on and off — thanks for giving me fresh eyes on it.

  8. 21

    Pretty awesome. Although if i end up double-clicking on a draggable element “mid-drag” it gets stuck in position and doesn’t go back to original location. How would one go about guaranteeing that it always goes back to its point of origin?

    • 22

      Rather annoying bug in an otherwise flawless app. Did you end up finding any solution for this? Anybody?

  9. 23

    Hello, good job! a consultation

    How you could do to drag the items are saved in the container? For example, an item is stored in the sidebar and drag another item appears when the first item in the sidebar, with this I mean that the items are saved and if you open the sidebar elements look

    Regards

Comments are closed.