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 learning CSS now.

Feedback 74

Comments are closed.
  1. 6

    Amazing job! Manoela, if you could make it work in IE9, even without bells and whistles, it could change the whole interface design scene around.

  2. 8

    I love you Mary Lou!

    Your works are awesome as always.

    <3 <3 <3 <3 Love you with all my heart. I am a big fan of yours! <3 <3 <3 <3

  3. 10

    For those who ran into issues with panel-scrolling on the sidebar example:

    You need to make sure your is at least 100% of the viewport, otherwise you lose the ability to scroll up/down

    html {
    height: 100%;
    }

    body {
    min-height: 100%;
    }

    • 11

      Well I wasted my 2 hours and fixed it myself; if only I had seen your comment earlier! *smh*

  4. 12

    I was playing around with this demo on my iPad, and I have to say it felt like a native app.

  5. 16

    Beautiful, But how do Get a URL (different for each object) to load when it is dropped?

  6. 17

    All nice interactions. Some thought needs to be put into cancellations on some of them. Say the user changes their mind and wishes not to upload a file and you are using the “page scale” style, how do they accomplish this without dropping into the drop zone?

  7. 18

    Guys! This is a very cool UI for drag and drop. Kudos! I’m glad I found this article.

  8. 19

    Thanks Mary Lou! I was already using draggabilly in my framework7 project, and your example is simply brilliant!!! hands-on there no other cool like this example so far. why don’t you develop further this library?
    using the draggabilly 1.2.4 some glitches get fixed and is really good looking.

    Thanks for the good stuff.
    Andrea.

  9. 21

    Even thought I think that this looks very nice, I don’t think it is a good idea to slide the option in front of the the mouse/finger as then it is easy for the user to slip and accidently make a unwanted action

Comments are closed.