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. 1

    Hi,
    just wanted to let you know that your articles are amazing and refreshing. Keep the good work !

  2. 4

    So beautiful, I wished to find a use of drag and drop on my website. Always inspiring work, thank you!

  3. 5

    A great Interaction really feel like I need to be improved a lot, thank you for the inspiring work.

  4. 9

    Nice article indeed, it adds a nice experience to may be some tedious tasks user have to do. it make task more enjoyable to do

    I just have one concern here, I wish if there’s a way for user to cancel his action to drop for example I dragged the target and the droppable areas appear but I found out I don’t want to drop in any of them I just want to cancel

  5. 11

    This is superb! Innovation, and forward thinking web design. Beautiful animation = superb user experience.

  6. 13

    Lovely, only issue is the drag is initiated to quickly. Simple click/tap allows me to drop into an area.

  7. 14

    This is really cool. The only parts I think needs to be rethought are the PAGE SCALE and REVEAL.

    Both of these take up the entire window which means unlike the others there is no way you can’t drop the item after you have selected it.

    Perhaps they should have a small ‘never mind’ box to one side?

  8. 15

    The best and most innovative thing i’ve seen in webdesign in ages! This is so cool. Nice work :)

  9. 16

    I love this idea (especially the modal one); however, I wanted to report a small issue to you. If you click rather quickly on one of the squares, and then hold it down to drag it, it appears the z-index remains higher than the “drop” area elements.

    Keep up the great work!

  10. 18

    It doesn’t work in IE9. There are just too many users with < IE10.

    I like all ideas on Codrops but 9 out 10 can't be used because IE is being ignored but not by the visitors.
    I do understand why but it keeps being a bottleneck for me.

    Its like giving a cookie but you can’t eat it!

  11. 19

    excellent work. here you can see what you could get everything from a browser.
    And there is no excuse for bad usability more.

Comments are closed.