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
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
1
vote
1
answer
632
views
Proper UX on a Widget dropdown menu
I am designing for a piece of web-based software that has a drag-n-drop functionality for "widgets" that can be placed in one of three columns. Over the 2 years of development the list of widgets ...
- 334
1
vote
3
answers
495
views
Click-to-edit and click-n-drag combined
I'm considering an option to combine two behaviours in a list:
Click to edit an item (like in Asana)
Click-n-drag an item (like in JIRA)
As illustrated in the screenshots, the cursor in both ...
- 581
1
vote
1
answer
275
views
Drag and drop indicator for web folder
What is a good and elegant way to show user that he can use drag and drop, but when the folder is not empty?
It's not a problem for empty folder.
I can use the whole area outlined by dash line.
But ...
- 325
2
votes
3
answers
124
views
Is it okay to change the default value of the dropdown based on the last selected action and use it as default for the next list?
Is it okay to change the default value of the dropdown based on the last selected action and use it as default for the next list? What's the disadvantage for the users?
On the Table, the dropdown ...
- 1,332
2
votes
2
answers
972
views
How to make user realise the Drag Drop functionality
I searched a lot but I did not get any solution.
Brief Description
I have a website which has some elements which are clickable and rest works on drag and drop funcionality.
Everything works ...
- 121
2
votes
1
answer
172
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 albums.
...
- 426
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
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
1
vote
1
answer
491
views
3D Touch for 6s users and long press for iPhone < 6s?
I'm designing a feature for a iPhone app where the user can drag and drop an element horizontally through the viewport. In order to start dragging the user would press and hold on the element for it ...
0
votes
1
answer
109
views
Click and drag vs. two clicks to mark period on calendar. Which practice wins here?
I'm working on calendar app and we have a debate:
What's the best practice to mark a period:
Click and drag - like Google Calendar and AirBnb
or
2 Clicks to mark (first click starts the marking ...
2
votes
1
answer
53
views
Is there a standard method for manipulating an element on a touchscreen?
I have a "Gantt-like" task management screen on desktop, where user can choose to extend the duration of a task by dragging on either edges to move either the start date or due date. Or drag at the ...
- 8,561
3
votes
2
answers
2k
views
Huge horizontal sortable column lists issue
Sometimes pride doesn't let you but I decided to put that aside and ask for some extra opinions from minds like mine! Sorry for the long post, have to analyze my thoughts to explain my issue.
I have ...
- 308
1
vote
2
answers
216
views
User experience issue and technical limitation in drag and drop functionality
In order to provide more information I am explaining you with more pictures with actual functional scenario. I am creating internal ticketing support system where super admin can able to see list of ...
- 305
3
votes
3
answers
2k
views
What are the most common modifier keys for dragging objects with a mouse?
What would you consider to be the most agreed upon modifiers and conventions, when dragging/dropping objects?
For example, holding Ctrl while dragging could add a "+" to the cursor and cause a copy (...
- 226
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
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
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
1
vote
1
answer
1k
views
How to handle reordering lists in iOS?
I have an iOS application that looks something like this:
Every row is tappable and as you can see, its pretty tall, only 4 can fit fully in the viewport. Also, every row has a left and right swipe ...
- 111
3
votes
5
answers
586
views
File Picker vs. Drag and Drop for Tablets
Imagine that you're creating a presentation on an iPad. You want to create a presentation, add content to it, and rearrange it as needed. You have a catalog of content to choose from, sorted by ...
- 31
0
votes
1
answer
169
views
Phone screen list item selection to replace drag / drop
I'm designing an app that will require the user to select a single item from a scrollable list and add it to a chat box that resides at bottom of a chat panel.
For wider screen web/tablet/iPad ...
- 103
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
2
votes
3
answers
985
views
Make click, drag and drop and link between both tables more obvious to user
The two tables in the window below are intrinsically linked.
Their purpose is to help the user to quickly allocate a pickup job to a driver. In order to do this, the user simply needs to click on the ...
- 692
1
vote
1
answer
198
views
Handling errors for drag-n-drop reordering for a large list
i have some difficulty determining the best approach(in terms of UX) to this problem:
I have a list of elements on a page. Each element has an id and an orderNumber, that are fetched from the server.
...
- 13
1
vote
2
answers
576
views
Add drag and drop items to multiple places in a tree
I'm struggling with a problem relating to a drag and drop system. I’m designing a complex system that allows the user to configure a decision tree to get to a price value.
This system simplified is ...
- 118
2
votes
1
answer
126
views
Is it okay to use a "place" and "replace" button if an image has already been uploaded using the drag and drop or upload an image function?
I am trying to use this Drag and Drop / Upload image feature and put it inside a field. By adding or uploading a "logo", it will will be replaced by the image uploaded and buttons like Delete and ...
- 1,332
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
1
vote
1
answer
163
views
Pan when dragging near edge of container
I am implementing a container view for a native mobile app that has draggable objects and also allows panning. To drag an object, the user presses and holds until it activates (by highlighting and ...
- 1,103
3
votes
1
answer
390
views
Best place on screen to put drag and drop
I'm having a set of items and a set of groups, The items can be dragged and dropped onto the groups to make a different combinations as user wants.
Now my question is which is the best place on ...
- 161
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
3
votes
2
answers
7k
views
What is the best icon to show that something can be dragged and reordered?
I am using jquery UI sortable to allow rows in an html table to be sortable. I want to use an icon for a handle and I am trying to figure out what is the best image / icon that would best illustrate ...
- 1,341
2
votes
1
answer
795
views
Reorder in grouped list
List of items, each has: Order, Category.
List can be sorted: by order, by category (actually two sort descriptors here: first by category, second by order).
And grouped: none, by category.
When ...
- 121
3
votes
2
answers
1k
views
Interface for selecting multiple items out of thousands, w/ categories
I'm trying to build an interface for filtering lots of data for the sake of searching. I need to present a VERY large collection of names, make it easy for the user to select all the names they need (...
- 143
1
vote
1
answer
1k
views
intuitive multiple directory (like file input) selection design (pic)
Anyway, I'm a developer by trade, but do most of my own design work. The program I'm currently developing requires that the user "configure" several directories in which several 3rd party executable ...
- 113
1
vote
1
answer
2k
views
Scrolling on Mobile Screen with Draggable Items
I have a responsive web app with lists of draggable items that are longer than the height of the screen. Users will need to be able to scroll down to see more items, but when they do, they run the ...
- 115
1
vote
1
answer
227
views
What are the alternatives to dragging items to add to data view?
I have a list of items in a tree in a column on the left of the page. Each item can be added to one or more views by dragging the item onto a view on the right of the page.
This is proving to be ...
- 11
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
1
vote
3
answers
443
views
Designing a mobile interface for 3 or more sortable lists
We currently have a web app that has the following interface:
download bmml source – Wireframes created with Balsamiq Mockups
List items can be reordered within a list and can also be dragged ...
- 5,888
0
votes
2
answers
169
views
Dragging a menu item and indicating where it will be when dropped
I have a menu list which is tree-like(So menu items can have children etc.).
I want the user to have the option to move around a menu item in that list. I want them to be able to put the dragged item ...
- 319
4
votes
4
answers
704
views
Is there a good alternative to zebra stripes when rows use drag-and-drop reordering?
This answer gives pretty good evidence that in a table with multiple columns, zebra stripes are the most effective way to make it easy to see which rows are which in the table. Sometimes in tables, we ...
- 619
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
1
vote
2
answers
316
views
How to handle map borders in 2D-map with drag and zoom out?
Case description:
The user sees a 2D-map that has limited size. He can drag this map. He can also zoom in/zoom out, like in Google Maps (the mouse pointer remains on the same coordinate, both in map/...
- 113
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
0
votes
1
answer
274
views
Grab point textures best practice
I'm using jquery's draggable and droppable to enhance the usability of a wireframe stack in our application, and I've already adjusted the cursor to the CSS move glyph to indicate as much.
I'd like ...
- 163
1
vote
2
answers
476
views
Designing a drag and drop sortable that can sort its own contents and copy its children into another sortable
I have this problem that's bothering me for a while.
I have an interface containing 2 or more sortables in a web app (sortables are controls where you can rearrange the child contents). Example: http:...
- 5,888
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
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
1
vote
2
answers
653
views
What is the fastest way a user can bulk update a set of dates?
I have a little web app that basically shows a roadmap of projects. Think your typical timeline view like this:
Each project has a date. Right now if you want to change the date of a project you ...
- 1,341
4
votes
2
answers
203
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 ...
- 163
4
votes
2
answers
476
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 ...
- 466