Drag & Drop Interactions

by Vittoria Marino on 03/24/2017

In the user experience in web and mobile applications, drag&drop is used frequently to interact with a given object, to create relationships between one object and another, or to upload a file. Basically, drag&drop has become part of the user experience that we all expect.

That’s why recently Andrea suggested to me that we integrate this functionality into applications created with Instant Developer Cloud.

Today I’m presenting the two new components that resulted from these efforts: Interactable and Dropzone.

Interactable is based on InteractJs, a library that lets you make an object draggable or resizable, or transform it into a drop area. To use it, you need to put an Interactable object in the View and specify for which objects this functionality should be enabled. Make this selection using the DragAcceptedElements, DropAcceptedElements, and ResizeAcceptedElements properties. There is more information about how to set them in the contextual documentation.

Dropzone is based on DropzoneJs, a library that makes it easy to create a drop area onto which files to be loaded to the server can be dragged. To use it in applications, simply create a Dropzone object in the View and the application is ready to upload files. The Dropzone component can be customized: you can choose whether to accept only a certain file type, limit the number of files that can be loaded, customize the graphic appearance, etc.

To show you how intuitive interfaces created with these components are, we’ve prepared two examples for you.

To try out the drag&drop between objects, open the Interact example. The start menu offers three choices: Tree, Double List, and Calendar.

The Tree view shows how simple it is to use drag&drop to move tree elements from one node to another: just touch one and drag it to another node. Elements can be deleted by dragging them onto the recycle bin icon at the bottom of the page.

The Double List view instead shows how you can move an element between two different DataMaps simply by dragging it.

Finally, the Calendar view shows a simple planner in which events can be dragged from one day to the next inside a given week. Resizing an event changes its duration, as happens in the calendar applications we’ve become accustomed to.

To try uploading using drag&drop, open the Dropzone example and drag an image onto the special area: the upload will be completed and the image will be shown in preview. The files on the server are visible in the section below. The previews can be deleted without deleting the corresponding files.

In this example, the Dropzone accepts only image file types. If you try to drag other file types, like a PDF for example, it will not be uploaded.

What do you think?

Leave a Comment

Previous post:

Next post: