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
1 vote
1 answer
67 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 ...
user avatar
  • 1,042
1 vote
1 answer
113 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,...
user avatar
  • 1,042
2 votes
2 answers
184 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 ...
user avatar
4 votes
2 answers
118 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 ...
user avatar
  • 91
1 vote
3 answers
74 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 ...
user avatar
  • 11
2 votes
1 answer
262 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?
user avatar
0 votes
1 answer
222 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 ...
user avatar
1 vote
3 answers
280 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 ...
user avatar
  • 8,052
3 votes
1 answer
47 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 ...
user avatar
  • 1,097
0 votes
2 answers
1k 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). ...
user avatar
  • 1
2 votes
2 answers
279 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 ...
user avatar
3 votes
3 answers
208 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 ...
user avatar
1 vote
2 answers
232 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 ...
user avatar
0 votes
2 answers
199 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 ...
user avatar
0 votes
1 answer
156 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 ...
user avatar
2 votes
1 answer
70 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) - ...
user avatar
1 vote
1 answer
149 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....
user avatar
2 votes
3 answers
253 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] ...
user avatar
0 votes
1 answer
65 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 ...
user avatar
  • 1,042
5 votes
1 answer
821 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 ...
user avatar
1 vote
2 answers
146 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?
user avatar
3 votes
4 answers
669 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'...
user avatar
  • 159
1 vote
1 answer
98 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 ...
user avatar
5 votes
2 answers
492 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 ...
user avatar
  • 25.3k
0 votes
2 answers
8k 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?
user avatar
  • 837
1 vote
2 answers
247 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 ...
user avatar
  • 11
0 votes
1 answer
2k 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. ...
user avatar
1 vote
2 answers
2k 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 ...
user avatar
  • 37
3 votes
1 answer
3k 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 ...
user avatar
  • 214
1 vote
2 answers
815 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 / ...
user avatar
  • 4,188
2 votes
1 answer
125 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 ...
user avatar
  • 123
1 vote
1 answer
268 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 ...
user avatar
  • 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 ...
user avatar
  • 391
2 votes
1 answer
112 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 ...
user avatar
4 votes
5 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, ...
user avatar
4 votes
3 answers
822 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 ...
user avatar
1 vote
3 answers
378 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 ...
user avatar
  • 135
2 votes
3 answers
199 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 ...
user avatar
  • 121
1 vote
2 answers
205 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 ...
user avatar
  • 219
2 votes
2 answers
154 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) ...
user avatar
  • 123
6 votes
3 answers
732 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 ...
user avatar
  • 935
1 vote
3 answers
622 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 ...
user avatar
  • 3,413
6 votes
1 answer
200 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 ...
user avatar
  • 163
1 vote
1 answer
583 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 ...
user avatar
  • 334
1 vote
3 answers
439 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 ...
user avatar
  • 581
1 vote
1 answer
263 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 ...
user avatar
  • 175
2 votes
3 answers
106 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 ...
user avatar
  • 1,322
2 votes
2 answers
924 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 ...
user avatar
2 votes
1 answer
159 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. ...
user avatar
4 votes
5 answers
235 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 ...
user avatar