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.
150
questions
111
votes
6
answers
16k
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 ...
- 4,026
63
votes
8
answers
34k
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 ...
- 2,032
56
votes
10
answers
13k
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?
- 932
41
votes
7
answers
29k
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 ...
- 2,032
35
votes
7
answers
23k
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?
...
- 925
27
votes
10
answers
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 ...
- 4,188
27
votes
3
answers
10k
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 ...
- 591
21
votes
8
answers
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 ...
- 387
21
votes
5
answers
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 ...
- 736
18
votes
5
answers
9k
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 ...
- 413
17
votes
4
answers
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 ...
- 271
16
votes
5
answers
4k
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 ...
- 3,032
13
votes
9
answers
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 ...
- 16.8k
13
votes
8
answers
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 ...
- 261
12
votes
6
answers
776
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 ...
- 423
12
votes
2
answers
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? ...
- 507
11
votes
5
answers
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 ...
- 173
9
votes
2
answers
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 ...
- 203
9
votes
3
answers
10k
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 ...
- 397
8
votes
2
answers
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 ...
- 183
7
votes
7
answers
4k
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 ...
- 1,886
7
votes
5
answers
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 ...
- 257
7
votes
2
answers
6k
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 ...
- 175
7
votes
2
answers
1k
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 ...
- 4,188
7
votes
3
answers
885
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 ...
- 173
7
votes
1
answer
178
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 ...
- 2,689
6
votes
5
answers
464
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 ...
- 2,352
6
votes
3
answers
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 ...
- 596
6
votes
3
answers
829
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 ...
- 935
6
votes
2
answers
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 ...
- 221
6
votes
4
answers
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 ...
- 8,561
6
votes
1
answer
208
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 ...
- 163
5
votes
1
answer
824
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 ...
- 7,371
5
votes
1
answer
362
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 ...
- 383
5
votes
2
answers
331
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 ...
- 213
5
votes
6
answers
2k
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 ...
- 790
5
votes
2
answers
486
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 ...
- 325
5
votes
2
answers
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 ...
- 875
5
votes
2
answers
542
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 ...
- 26.7k
4
votes
9
answers
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?...
- 2,986
4
votes
3
answers
894
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 ...
- 257
4
votes
1
answer
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
2
answers
123
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 ...
- 91
4
votes
2
answers
387
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 ...
- 519
4
votes
3
answers
1k
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 ...
- 237
4
votes
6
answers
1k
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, ...
- 506
4
votes
5
answers
251
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 ...
- 183
4
votes
2
answers
156
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 ...
- 345
4
votes
2
answers
2k
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 ...
- 736
4
votes
2
answers
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 ...
- 41