Stack Exchange Network

Stack Exchange network consists of 174 Q&A communities including Stack Overflow, the largest, most trusted online community for developers to learn, share their knowledge, and build their careers.

Visit Stack Exchange

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.

0
votes
1answer
36 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 ...
5
votes
1answer
789 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 ...
0
votes
2answers
99 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?
0
votes
0answers
27 views

Drag n drop list element with multiple adjacent list

Say I have a list of items, where items can have sub-items, represented by an indentation. Users can use drag-n-drop to reorder and/or convert (an item to a sub-item or vice-versa). The vertical ...
3
votes
4answers
170 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'...
1
vote
1answer
69 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 ...
4
votes
2answers
357 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 ...
0
votes
2answers
1k 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?
0
votes
2answers
160 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 ...
0
votes
1answer
557 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. ...
1
vote
2answers
578 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 ...
1
vote
1answer
1k 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 ...
0
votes
0answers
301 views

Mouse-cursor for objects that are both clickable and draggable

I'm working on an application in which geometric objects on the screen can be clicked (to 'select' them) and they can be drag-n-dropped (to move them around on the canvas). I was just wondering what ...
1
vote
2answers
421 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 / ...
3
votes
1answer
47 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 ...
1
vote
1answer
194 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 ...
3
votes
2answers
633 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 ...
3
votes
1answer
83 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 ...
4
votes
5answers
482 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
3answers
631 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 ...
1
vote
3answers
202 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 ...
2
votes
3answers
118 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 ...
1
vote
2answers
146 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 ...
2
votes
2answers
117 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) ...
6
votes
3answers
415 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 ...
0
votes
3answers
354 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 ...
6
votes
1answer
140 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 ...
1
vote
1answer
434 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 ...
1
vote
3answers
337 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 ...
1
vote
1answer
210 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 ...
2
votes
3answers
85 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
vote
2answers
624 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 ...
3
votes
1answer
96 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. ...
3
votes
5answers
179 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 ...
5
votes
2answers
214 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 ...
1
vote
1answer
446 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
1answer
87 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
1answer
43 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 ...
2
votes
2answers
1k 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 ...
0
votes
2answers
169 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 ...
1
vote
3answers
718 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 (...
4
votes
2answers
742 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 ...
6
votes
4answers
939 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 ...
15
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 ...
1
vote
1answer
568 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 ...
3
votes
5answers
508 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 ...
0
votes
1answer
135 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 ...
105
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 ...
2
votes
3answers
500 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 ...
1
vote
1answer
104 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. ...