New Magnetic Drop (Beginner)

Few months ago I wrote this tutorial on how to create a “magnetic” drop area for activities like, creating a paper doll, a puzzle and any other that requires an object to “stick” to a certain position, when dragged above the per-determined area. The feedback was very positive, even thou many steps were required to achieve the results. With that in mind I decided to make it a native feature, available since version 2.1. In sum, what before was an intermediate tutorial now is a “no-brainier” one.

For this tutorial, I am assuming you know the basics on using Kwik (how to create a new project and how to publish, at least). At the end of the tutorial you are going to have the following results:

You can download the project files here. Don’t forget to install the latest Kwik 2.1. After unzipping the file, open the page1.psd file in Photoshop. Then, in Kwik 2, create a new project, using the opened file as the first page.

Before we start to add our interactions, it is important to understand what we have. The colored layers (2 ears and 1 head) are the draggable objects. The grayed layers (they are individual objects – I am calling them shadows) are the droppable areas. As you can see, we are going to set a boundary around each object (this way, users don’t need to position the draggable layers exactly on top of its shadow.

Preparing the stage

We want all the draggable layers to show up in different positions when users refresh the screen. Select the 3 layers (ear_left, ear_right and head) then click Layer Properties (under the Layer and Replacements toolset). Set the Randomize positions of X to 200 and 550, and Y to 350 and 600. This will set the random position to all 3 selected layers:


Making the objects draggable

Select the ear_left layer and go to Interactions toolset. When the window opens, enter the following (for more information on the new Drag options, check the official documentation at the right):

In the new Drop area (optional) panel, select the layer you want as the droppable area (in this case, earl_shadow). Set the Active boundaries to 50 (or any other value you want). If you want to lock the dragged layer when it hits the droppable area, enable the Lock when positioned checkbox.

We are not using the other options but, they may be interesting if you a creating a puzzle, for example. You can create special actions for every object being dragged – for example, you can set a variable to be updated when the object is lock (this is the way to control if, for example, a 3 piece puzzle is completed).

Repeat the process to the other layers, using the appropriate actions.


 When 3 pieces are completed, let’s play an animation.

The animation for instance, a pulse widget. When creating an animation for action or button, it must be set with Wait request.



First create a variable from Project and Pages > Create Variable. The value is zero.



Second create an action. ( This action is set for Trigger action on lock in each Drag setting later. )


Select Edit Variable from Code.  Set count = count + 1

Select IF conditions.  Because there are 3 pieces. We count it up for each drop till it equals 3. If count == 3 then PlayAnimation end.

Add Play animation inside IF and End IF


Now you attach the action to each Drag. Trigger action on lock is now act_dropped2015-05-31_2041


Preview your project and enjoy!