How to make Drag and drop in NativeScript

Raj Bhatt
Raj Bhatt
Apr 14 · 4 min read
An IDE tools image while programming
An IDE tools image while programming

Background

Recently I worked on a mobile application which required cool functionality that includes the scenario where the user should be able to rearrange items using gestures. The whole process is to create a puzzle that the user needs to be set in the right order, Sounds crazy.

Application is built using NativeScript-Vue. To fulfil requirements, I used Nativescript Gesture API for the implementation, after applying lots of gestures I ended up with a panning gesture to create drag and drop functionality.

We are going to make drag and drop functionality in ios and Android using NativeScript built with Vue. Here is an animated image of what we are going to build in the next steps.

Here, its GitHub repository https://github.com/rjbhatt110/nativescript-drag-drop-fn of this implementation.

Image for post
Image for post

A dropArea (Grey-boxes) and random ordered draggable Object (Color-boxes) appear on the screen. Using gestures, the user is able to drag an object to the drop area to set the right order.

Getting Started

Before creating a new project I assume that you already set up a NativeScript environment on your system.

Let’s create a new project. From the terminal or command line, execute the following command.

Starting with the basic code of drag and drop features. open app.vuefile and After that, we begin with UI structure by adding an Image of dropArea with @pan event and its reference dropArea0 on it.

After adding a UI, it’s time to include logic by adding the following javascript code.

In the above code, we take reference of UI element in the mounted() a method. Later on, we use that reference as nativeview to access properties of an image using onPan() events which handle three states of panning gesture.

onPan() event args.states === 2 we assign our deltaX and deltaY to translateX and translateY which create dragging.

Next thing is to add more elements in UI code that contain four dropArea (Grey-boxes) and four draggable Object (Color-boxes) with arrays named boxArray which bind into an image tag with v-for attributes.

We are also updating our logic as well by passing an event, index and dragObject to onPan() a method as an argument. after that, we create boxArray for a binding UI element that we used in the v-for loop and add all references in mounted() a method.

It’s time to play with animation, The following code implements scale up animation when an object comes over the drop area. So, we have to write this code for other drop areas as well.

Now we are going to manage animation of the draggable object and start implementation that creates a swappable object from one dropArea to another.

For handling swap between two objects, we use switch case to manage different positions that get by array index. At the end of this condition, we splice boxArray that helps to get our final position of an object.

Final Code

Finally, It’s time to put everything together adding all elements, code and animation to achieve an expected result.

ashutec

We offer software and product development services.

Raj Bhatt

Written by

Raj Bhatt

Software Engineer at Ashutec Solutions Pvt Ltd

ashutec

ashutec

We offer software and product development services. We architect, design and develop Web, Mobile, and Desktop applications. We deliver quality, reliable and cost-effective solutions using fixed cost, time and material models and open to other models as per needs of client.

Raj Bhatt

Written by

Raj Bhatt

Software Engineer at Ashutec Solutions Pvt Ltd

ashutec

ashutec

We offer software and product development services. We architect, design and develop Web, Mobile, and Desktop applications. We deliver quality, reliable and cost-effective solutions using fixed cost, time and material models and open to other models as per needs of client.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store