a method of direct manipulation where a user moves an item via a pointing device to "grab and drag" an item to a desired location, then "dropping" the item to specify an action to perform.

learn more… | top users | synonyms

47
votes
8answers
9k views

How to visualize the possibility of drag'n'drop?

My web application contains a list of elements, which can be sorted by drag'n'drop. How should this feature be visually represented to users?
46
votes
8answers
13k views

Best UI pattern for letting a user assign items to groups

Problem: the user has a list of about 5-20 uncategorised items and needs to categorize them into 2-4 groups. The tricky part is that the same item can be placed into more than one group (this is an ...
26
votes
10answers
3k views

Make object look draggable

I have a selection object (with the text SELECTED on it) that floats around on a background. The selection object is draggable and is used to drag it onto a furniture to make a selection. The user is ...
19
votes
8answers
3k views

Why is the drag area usually limited to the “title bar”?

Take a simple dialog window: The user will expect that the titlebar can be used to drag the window through the screen. But why is it limited to just this bar? Why is it uncommon that windows can ...
19
votes
5answers
6k views

How to make it obvious that you can drag things that you normally can't?

My interface allows users to move things that usually have fixed positions in other applications, such as text boxes. What can I do to make it obvious to the user that they can move certain objects? ...
16
votes
7answers
7k views

What is a good visual cue for drag and drop? (for reordering a list of items)

I'm wondering if anyone has any opinions on what is the best visual cue to indicate to the user that list items can be reordered via drag and drop? Here are a few options I've been playing around ...
15
votes
5answers
2k views

Is 'click to add' or 'drag and drop to add' preferred by the user?

I am working with a Javascript dockable window framework called Golden Layout for a web app I'm developing. On their site, they have two examples for how to add windows to their framework which are ...
14
votes
5answers
5k views

Is it a good user experience to have drag and drop in tablet apps?

I'm currently working on an iPad/tablet app. I want to decide to use or not to use drag and drop in my app. As I'm looking at iPad's native apps there is no drag-and-drop functionality. Is it a bad ...
14
votes
5answers
9k views

The Hamburger Icon - menu or drag affordance?

There seems to be a difference in meaning for this icon emerging: For some it means 'menu', for others it represents 'draggable item' (in preference to the small dots used in GMail for instance). ...
14
votes
4answers
1k views

Making space for the “drop cue” in a drag-n-drop design

I'm developing a drag-and-drop reordering interface for books on shelves. (You can try it live if you're on the latest WebKit.) When you drag a book over a shelf, it accommodates space for it by ...
13
votes
9answers
2k views

Warn desktop user of draggable website

I'm building a site that uses the jQuery iScroll plugin in the main navigation system. (http://lab.cubiq.org/iscroll/examples/simple/). Please note that the plugin is not exactly drag-n-drop. Right ...
11
votes
2answers
2k views

How do I make a table row on a web page look draggable?

I have a table on a web page where I need to let the user reorder the rows. I was thinking of letting the user drag the rows to reorder them. But how would I let the user know that he could do that? ...
11
votes
3answers
769 views

When to use grab vs move cursor?

I am making an app with a drag and drop UI. I plan on changing the cursor when hovering over the draggable elements. What's the difference between the move and grab cursors? Can they be used ...
10
votes
6answers
584 views

What are the common idioms for the drop portion of a drag and drop operation?

I'm only concerned here with the other half of a D%D operation, the drop. What are the common idioms to communicate to a user they can drop? And which are the "best" and in what situations? In ...
10
votes
8answers
13k views

Drag and Drop with scrolling on tablets

I'm currently facing a design problem with drag and drop on tablets. Scenario: The screen is split in half, on the right side, I have a list of items and on the left side I have a list of boxes. I ...
10
votes
5answers
1k views

Folding columns of a kanban view

In our enterprise management software, we use "kanban" views for different purposes; pipeline of business opportunities, tasks, recruitment process, bugtracker, etc. The example bellow shows the ...
9
votes
2answers
664 views

Cancelling drag-n-drop action before drop

I'm working on sortable tree component. Sorting and moving of leaves and branches is done using drag-n-drop. One of my users has pointed out that once you've started dragging an item you have to drop ...
7
votes
2answers
4k views

Drag n drop on touch devices

I notice that touch apps rarely make use of the "drag n drop" (dnd) idiom, and instead dragging is almost always used for scrolling. Is there a reason for this? Is it confusing or "wrong" to use dnd ...
7
votes
2answers
571 views

Combination of text and drag and drop search

I am designing a filter function for a software application (not a web site) which contains multiple input controllers. A text input is used in combination with a drop zone for files (for drag and ...
7
votes
2answers
890 views

What the best way to allow a user to re order items in a large list

How would you present an interface, that allows a user to re order a list of around 150 products anyway they want. so they can say "I want to show this 5 first, then these 3 next, and so on...". I ...
7
votes
1answer
128 views

Re-plotting items on a map

I am working on a map based system for a control centre. The operatives who work in the control centre work on various map based events such as traffic, roadworks etc. One of the tasks the users wish ...
6
votes
7answers
2k views

Do people still use drag and drop?

Is drag and drop (for say photo uploads) a good idea? Aren't users frustrated by all the steps you have to take? Do most people even know how to do it? Open a window Browse to your files Ensure ...
6
votes
5answers
267 views

How to deal with very small droppable area in touch devices?

I'm working on a product customizer in which the user can drop a material directly to parts of the product. The problem is that some parts of the image are very small. How can I solve the problem ...
6
votes
5answers
1k views

Up & down arrows vs Drag & drop for reordering elements

Something I often argue with a lot of dev & ux guys, I think for simplicity of use, arrows will always be easier than using a drag & drop action, Seeing normal people use drag & drop is ...
6
votes
3answers
1k views

Visually indicating that a website supports drag and drop?

I'm building a system that requires file-uploading, and I'm wondering how I can indicate that the browser windows supports drag and drop. Since the feature is new to modern browsers, there's no user ...
6
votes
2answers
946 views

Drag and Drop: Better to avoid drag-n-drop to offscreen elements?

I have a particular web interface in which drag-and-drop may be useful, however, the problem that I see is that the list of items to be dragged could potentially be very long (below the fold). Is it ...
5
votes
1answer
121 views

Drag affordance for modal calculator within a modal window

I'm struggling to show affordance for my calculator element. The user of this app is taking phone payments for bills. They've clicked on an icon from the main screen that allows them to split out the ...
5
votes
4answers
360 views

Auto-collapse subitems when using drag and drop for large hierarchical lists?

We're looking at a reusable interface that can allow user to view tabular data with hierarchical structure and reorganize/re-order items. Some use cases for this: Updating priority of work on a ...
5
votes
3answers
406 views

Are there applications or methods for comfortable coding on touch screen devices? [closed]

Coding usually involves a lot of typing, but on touch screen devices too much typing is quite tedious. Some of that typing could be replaced by autocompletion or autogeneration of code and therefore ...
5
votes
2answers
231 views

What is the best way to point the user somewhere offscreen in a draggable map?

Let's say you have a Google Maps like draggable map: I'd like to show the user that there is something waiting for him somewhere outside of the visible portion of the map, let's say to the left. My ...
4
votes
2answers
250 views

When dragging large elements - will an equally large placeholder hinder Usability?

I am designing a Web Sortable (via D&D) Interface. When you drag an element I would like to have the placeholder indicate where the element will be dropped. The problem is, if I want to move a ...
4
votes
3answers
497 views

Drag and Drop vs Double Click behavior

I'm working on a web application for a client which is essentially an inventory management system for a shipping/warehousing entity. One vital part of the system is the ability to add products to a ...
4
votes
2answers
119 views

Tap or Drag to mark a specific point?

The scenario We have a screen with a view containing many small symbols. The user will have to choose a single element. In order to find the correct element, he'll have to pinch and pan. As you can ...
4
votes
2answers
701 views

Alternative control to drag and drop for assigning tasks to an individual?

I am working on a web application for Branch Managers at an investment bank to assign accounts that are without Financial Advisers for whatever reason. Some reasons are the Financial Adviser has ...
4
votes
2answers
136 views

How do I minimize ambiguity with Drag-N'Drop for vertical lists?

Say I have two lists with List A positioned directly above List B (Requirement). Both lists allow Drag-N'-Drop re-ordering, initiated by "long-touching" an item. Auto-scroll functionality also ...
4
votes
2answers
286 views

Table builder - Drag-n-drop vs. clicking through dialogs?

I am working on a design of a module for a web application. The web app is to be used on desktops and tablets - in the newer browsers (IE9, CHrome, Safari, etc.). One of the tasks that users have to ...
3
votes
7answers
664 views

Does this site use a good UI for shopping cart? [closed]

Does this site use a good UI for shopping cart? How do you drop something in the cart? Is it intuitive enough to be used?
3
votes
9answers
893 views

What is the usability benefit of “drag files/images here”?

I often see upload dialogs asking the user to drag a file into a highlighted area: This is an alternative to the classic file chooser dialog. How does the drag-and-drop-option improve the ...
3
votes
3answers
2k views

Is a drag and drop UI usable for organizing/categorizing items?

I am creating a UI where a user can manage users by creating a group, and then dragging and dropping them to fill the groups as they would like. One problem I am faced with is that the complexity of ...
3
votes
3answers
362 views

Positioning of a Growl Message in a web application

Following case exists: User has got an web application. One part of the software is a kind of dashboard area where the user can organize all his different graph widgets (diagrams). He has different ...
3
votes
2answers
2k views

“Click-and-drop” alternative to drag-and-drop, for accessibility (and maybe mobile-web)

I have observed some people fumble with a mouse. They seem unable to synchronize clicking the buttons and sliding the mouse consistently, to where they drag things when they only meant to click on ...
3
votes
1answer
2k views

Examples of patterns for multiple file uploads using drag and drop?

I've been working on an app that involves making an application for a permit. Applicants typically need to upload 5-16 documents (drawings and specifications) before they submit their applications. ...
3
votes
2answers
100 views

Changing a visual object as it is dragged

Imagine that you have an interface with two principal panes: a map and a timeline. We want to enable our user to be able to select a job displayed on the map (for instance, "repair washing machine at ...
3
votes
5answers
72 views

How to handle drag-and-drop when the user can't see the target

I just had a catch-22 from production that I have no good answer for: The user has a partial calendar (there are no month or year breaks, it's just an eternal scroll of weeks) displayed, each day of ...
3
votes
2answers
280 views

How do you indicate an element is moveable by keyboard arrows?

I am building a drag and drop interface where elements can be moved by a mouse or by the keyboard arrows. How should I 'tell' the user these elements are moveable using the keyboard? Any idea or a ...
3
votes
1answer
54 views

Most Intuitive way to organize images into albums?

I need to create a interface wherein a user can quickly categorize few of his photos into albums. Constraints 1 photo can be a part of multiple albums. Atmost there are 15-20 photos and 5-6 ...
3
votes
2answers
129 views

How to distribute selected listitem through a table (days of week)

What 's the best way to do the following : I want to distribute my employees among the specific periods in the week My current UI is like that on The right side : The list box of employees and ...
3
votes
2answers
390 views

Menu builder suggestions

I have an online menu system that is used in the food retail business. The difference between a regular cart based store and a food store is the sub options a customer might have. For example you ...
3
votes
2answers
219 views

Drag and drop in long lists

I continue to hear drag and drop can be a bad user experience when dragging to reorder over long distances, such as within a list and when scrolling to the target location is required. Are there any ...
3
votes
1answer
130 views

Should the same element provide navigation and interaction?

I have a typical tree navigation with a property window on the right side which configures the selected element. download bmml source – Wireframes created with Balsamiq Mockups Now this ...