Questions tagged [drag-n-drop]

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.

Filter by
Sorted by
Tagged with
112
votes
6answers
15k views

What do the 3 close horizontal bars (not hamburger menu) represent and what is the origin of the design?

For some reason, those 3 horizontal bars centered in this Jabber client application is something I associate with something you can drag down, but I can't remember at all why I associate 3 bars with ...
61
votes
8answers
30k 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 ...
56
votes
9answers
12k 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?
39
votes
7answers
26k 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 ...
34
votes
7answers
21k 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? ...
27
votes
10answers
4k 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 ...
27
votes
3answers
8k 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 ...
21
votes
8answers
4k 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 ...
21
votes
5answers
13k 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). Is ...
18
votes
5answers
8k 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 ...
17
votes
4answers
2k 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 ...
16
votes
5answers
3k 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 ...
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 ...
13
votes
8answers
18k 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 ...
12
votes
6answers
752 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 ...
12
votes
2answers
3k 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? ...
10
votes
5answers
2k 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
1k 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 ...
9
votes
3answers
9k 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 ...
8
votes
2answers
2k 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
7answers
3k 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 ...
7
votes
5answers
4k 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 ...
7
votes
2answers
986 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
1answer
172 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
5answers
457 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
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
5k 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 ...
6
votes
3answers
690 views

UX for linking elements together

I'm looking for an intuitive way to let a user group elements together, a bit like Photoshop's 'Link Layers' - but preferably without popup menu. Right now I'm thinking about the following: The idea ...
6
votes
2answers
2k 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 ...
6
votes
4answers
1k 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 ...
6
votes
1answer
197 views

RWD - Drag to background

I have the following setup for a responsive website. download bmml source – Wireframes created with Balsamiq Mockups The problem I'm running into is that on mobile devices, when the sidebar is ...
6
votes
3answers
750 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
1answer
818 views

How to show the user has "grabbed" an element?

I'm working on a mobile drag and drop feature, where users can rearrange the order of list items by dragging and dropping them in a new place in the list. So far the flow is as follows: the user ...
5
votes
1answer
316 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
2answers
279 views

What are the rules concerning drag-and-drop functionality?

I have an app with drag-and-drop functionality, and I'd like to make it conform to some sort of rule so as to make it as intuitive for my audience as possible. The iOS Human Interface Guidelines ...
5
votes
2answers
451 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 ...
5
votes
2answers
1k 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 ...
5
votes
2answers
470 views

Drag & Drop feature for customizing UI on modern web applications

Many web applications that allow you to design website have drag & drop features that allow you to rearrange the layout as most of the components are modular. There are also many web applications ...
4
votes
9answers
4k 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 usability?...
4
votes
3answers
809 views

Are there any drag and drop UI development techniques that are WCAG compliant?

Does anyone know if there are any designs or coding techniques that make drag-and-drop UI features WCAG-compliant in software applications (specifically web apps)? I noticed that drag-and-drop ...
4
votes
1answer
5k 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. ...
4
votes
2answers
117 views

Communicate that an object in the toolbar cannot be added to the document a second time

I'm working on a toolbar containing objects that can be dragged into documents. You can also click on these objects to add them to the document. Some of these objects have restrictions and can be ...
4
votes
2answers
378 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
950 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
5answers
948 views

Drag and drop in one axis (reorder) - which cursor?

I was wondering which hover cursor is the best choice for dragging elements in one axis only, for example in reordering elements among listing. cursor: move; It has four arrows, so it's misleading, ...
4
votes
5answers
226 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 ...
4
votes
6answers
1k views

Drag and drop direction

I am designing a function where the user is able to drag items from one list and drop them in two others. I was wondering which direction is indicated for that action. In the first case, the list with ...
4
votes
2answers
136 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
1k views

Click and drag affordance

We have a Silverlight application which has two main areas: a vertical list of fields on the left, and a work area on the right. There are two possible operations that the user can perform on the ...
4
votes
2answers
1k 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 ...