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.
149 questions
1
vote
1
answer
170
views
I need a way for the user to select 4 boxes and arrange them in order
In my example I was thinking as the user clicks on a box the checkmark will be selected and there will a border displayed. After selecting the 4 selections they can drag them in order from left to ...
- 71
1
vote
1
answer
72
views
Global vs contextual file dropzones
Our application provides a global dropzone for convenient uploads into a media library - you drag a file, and an overlay for the entire page tells you that you can drop it anytime.
However, on certain ...
- 11
2
votes
1
answer
354
views
How do you make it obvious that the entire page is a drop zone?
We're building a feature where our users can upload files to their dashboards.
In addition to being able to view their files, I would like the users to be able to drag and drop files onto the page (...
- 1,414
0
votes
1
answer
698
views
User's expected behavior when uploading files before submitting
Problem:
I have a form that has a couple fields, but also asks for the user to upload files. Potentially, the user might upload multiple files, so we are saving them (kinda like saving drafts), but ...
- 1,414
1
vote
1
answer
214
views
Expandable, nested graph editor
I have an application that allows users to create and edit graphs. The interface is a simple drag & drop UI that allows creation/deletion of nodes and edges. Nodes contain some internal ...
- 61
1
vote
1
answer
307
views
Draggable widget - how to indicate draggability
I have a popup Javascript widget with an icon that is embedded into the right-hand corner of my site (by default.) The user can drag and drop the widget icon to another corner of the site if they wish,...
- 113
2
votes
2
answers
224
views
Is dragging the mouse with a button pressed not controversial at all?
Not about drag'n'drop specifically, but all kinds of interactions requiring a mouse-button to be pressed while moving the mouse, or dragging while keeping the finger pressed to a touchscreen. ...
- 23
1
vote
1
answer
1k
views
Uploading and categorizing files thereafter - What is the best way to upload these files?
We are building a feature where users can upload their files.
Idea (A):
Because multiple files can be uploaded by the user, one idea was to use a drop zone. The user is able to select a Category even ...
- 1,414
1
vote
1
answer
129
views
Should user simply be able to upload a PDF?
I'm working on an application where a user can submit an important document that contains information we need from them. The information contains details such as - event name, event location, duration,...
- 1,414
2
votes
2
answers
848
views
Sorting VS Row Rearrange
I have a watchlist containing a list of stocks, and one of the popular usages of such a list is rearranging the rows (dragging and dropping selected rows to a favorite user position). Now, let's add a ...
- 43
4
votes
2
answers
132
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
1
vote
3
answers
139
views
What feedback to give to users about why drag & drop does not work here?
I've been struggling to find good examples of this online, basically, the issue I'm trying to solve is that I want to provide feedback to users on why they're unable to rearrange the order of their ...
- 11
2
votes
1
answer
600
views
The best way to select multiple rows in a table and be able to reorder the selected rows [closed]
I am designing a dashboard where the user can select rows in a table and reorder/resequence the selected rows before clicking on the print button, What could be the best possible solution?
0
votes
1
answer
377
views
Drag and drop lists - multiple items with same priority
Initially, I had the following requirements:
There are 2 lists with items. The user needs to be able to move the items from one list into the other.
Each item needs to have a priority.
I've ...
- 3
1
vote
3
answers
958
views
Adding extra information to a file that's being uploaded via dropzone
We're redesigning a file upload experience. The use case is to add supporting documentation to a support ticket. The user selects a file, indicates the document type, and then clicks Upload. Once ...
- 12.9k
3
votes
1
answer
67
views
Horizontal slides editor - How improve its navigation?
I'm building an editor to create a structure of a page based on a full-screen vertical and horizontal slider.
A site is composed for vertical sections.
Each of those can have 0 or a limited number ...
- 1,077
0
votes
2
answers
2k
views
Best UI pattern to allow the user to assign 1 level nested items to two groups
My issue is something similar to this one - Best UI pattern for letting a user assign items to groups
I am looking for a good UI design for mapping items between 2 groups (only one-to-one mapping). ...
- 1
3
votes
2
answers
575
views
Best approach to having a sort, select and set of action buttons on a table row
Okay so I have a bit of an odd table to achieve and I'm unsure on the the best UI/UX approach to go with.
I have a small table of files, usually at most there would be about 10 files, one of the ...
- 41
3
votes
3
answers
221
views
How to make this interface work when there are too many objects?
My situation is this: I have an administrative app for a school. A teacher can see a list of her classes, and their students, and you can drag a player from one class to another:
This works really ...
- 571
1
vote
2
answers
472
views
Is it best practice to place an editable data table in a modal/popup?
I am curious if this is already established as best practice but so far I haven't seen any standards on this.
Let me know your thoughts.
Scenario is:
We are trying to go with either V1 or V2 inside ...
0
votes
2
answers
502
views
Best UX for loading several files and rename them
I have this screen where the user uploads up to 10 files, each one of them needs to be renamed to describe what's its content (fixed descriptions), I already rename the files as they are loaded, but ...
0
votes
1
answer
168
views
Trello-like UI with extra actions
Users are charmed by the easiness of Trello's way to move cards from one list to another to express actions. The question is, not everything can be expressed by changing column card belongs to. What ...
- 233
2
votes
1
answer
99
views
What would be the best way to organize a form development tool that has questions that can optionally be grouped by categories and subcategories?
I am building a form design tool for some clients to use when filling out some surveys.
The form can be populated with questions which map to varying form elements (Text, Select, Checkboxes, etc) - ...
- 123
1
vote
1
answer
234
views
What is the technical name for the "Tap to translate" button from GoogleTranslate app?
When copying some text on Android, Google Translate displays a floating button on the side of the screen (top / right) that can be tapped to translate or just dragged up and down to not be obstructive....
- 111
2
votes
3
answers
270
views
What is correct user expectation regarding drag and move?
I have the following note taking app - https://wenote.jstock.co
I have some question, regarding user expectation regarding drag and move.
Say, you have the following card position.
[1] [2]
[3] [4]
...
- 1,781
0
votes
1
answer
71
views
Editor functionality
We have an editor that allows you to build a static page.
On the left sidebar of the editor are buttons that allow you to change the colors, text, add images, etc. On the right is a preview of the ...
- 1,414
5
votes
1
answer
828
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,423
1
vote
2
answers
152
views
Which one is better for drag sign [closed]
I have checked some websites and found these two signs as drag symbol:
Which one is better?
- 250
3
votes
4
answers
1k
views
Drag and drop reordering with large items
I'm trying to implement a drag-and-drop functionality to reorder items.
The items are of varying size (height), and in some extreme cases taller than the screen.
The simple method shown below wouldn'...
- 159
1
vote
1
answer
600
views
What's Apple's term for horizontal "swipeable bar"?
I'm looking for the term of the UI element Apple is using pretty often lately. On iPads you can see them on the top of windows to symbolize that the user can drag this. On the iPhone X it replaced the ...
5
votes
2
answers
589
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 ...
- 27.7k
0
votes
2
answers
19k
views
Drag image here, drop image here, or drag and drop image here? [closed]
Are there any objective reasons to choose one of the below options?
I don't know whether to go with drag image here, drop image here, or drag and drop image here?
- 847
1
vote
2
answers
300
views
Connecting items in from webshop A to B
In the current project I'm working on we need to connect items in different webshops together. These items are the same but they have different article numbers and different descriptions so the ...
- 11
0
votes
1
answer
3k
views
Best practice for draggable, sortable with paging records
What will be best design practice for having items thumbnail with option as drag gable, sort able with paging records(considering more than 1000+ records)?
Below is just my current implementation.
...
- 101
1
vote
2
answers
3k
views
Drag and drop vs file picker
This is part of the on-boarding process, where we encourage people to either create a new project or upload a specific file type to create project.
While I was designing I thought about three ...
- 37
3
votes
1
answer
4k
views
Accessibility for a Draggable, Droppable and Sortable component
This is a component that I'm trying to make accessible:
As I understand, the ARIA Authoring Practices guidelines for drag and drop is basically:
Tab to move through the list of items
Space to select ...
- 214
1
vote
2
answers
1k
views
Re-ordering items on a list... Should we use drag & drop or a dropdown with a number list?
What is the most intuitive / easiest way to sort a list of items? Is it through drag and drop (drag and drop the rows in the order you want) or do something like put a dropdown list beside each row / ...
- 4,348
2
votes
1
answer
154
views
keyboard based drag'n drop as preview or direct ?
I've got so far my drag'n drop indicating where the items will be dropped:
However, i have the same operations available through keyboard shortcuts, ie: ALT + Arrow-Keys. But the keyboard variant ...
- 123
1
vote
1
answer
272
views
Alternatives to a grid of draggable thumbnails for responsive use case
I'm improving the UX of my exercise prescription Web App which is used on Mobile, Tablet and Desktop. Therefore the implementation I seek is to be touch and viewport friendly.
Background
My web app ...
- 111
2
votes
2
answers
1k
views
Alternatives to drag and drop lists
I'm working on an app for teachers, that allows teachers to input a class list, and filter students by gender and performance before submitting for further processing. At the moment, the second step ...
- 391
2
votes
1
answer
167
views
How to assign people to groups on a mobile device?
I have created a page where users can search for pupils and add them to a group, by moving them from one column to another. This works great on a desktop device, but trying to reduce this page down to ...
- 43
4
votes
6
answers
2k
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
3
answers
988
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
1
vote
3
answers
588
views
Can I replace drag & drop reorder with "Click to reorder"
I'm building an app where I need the ability to reorder list items (most often in the range of 2-15 items).
I despise drag and drop especially for lists long enough to go off-screen.
I have an idea ...
- 135
2
votes
3
answers
219
views
Visual feedback for restricting drag and drop in a list
I have a table with a list of items. Users are able to drag and drop each item up and down to reorder the items.
I want to set some control in place. For example, in the table below, I want to ...
- 121
1
vote
2
answers
238
views
Relative position for the mouse pointer when dragging-rotating a shape
When clicking in a handle (in blue in the image below) that allows to rotate a shape, you don't always click in the center of it.
My question is how do you deal with this (Δx, Δy) small vector (in ...
- 219
2
votes
2
answers
176
views
How important is visually indicating that ListBox items are drag-dropable in an application where not every List has this functionality?
We're building an application with various modules a great deal of which involves browses with lists of items (not unlike the list of questions here on Stack Exchange).
One of the modules (thus far) ...
- 123
6
votes
3
answers
1k
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 ...
- 995
1
vote
3
answers
717
views
Draggable canvas
I have a draggable canvas, in the way that the user will have to navigate by dragging the surface, but how do I inform the user that it is actually draggable?
So far I have an open hand when not ...
- 3,543
6
votes
1
answer
209
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