Building Drag and Drop Interactions

Drag and drop interactions in real applications are typically not just for show. The result of the interaction is much more important than the interaction itself. With drag and drop interactions in iRise, you have the ability to visualize both the action and the result, adding to the simulation's impact and making the requirements even clearer for stakeholders.

Watch a Video

This video touches on many of the concepts we’ll cover in this tutorial:

Drag and drop interactions in iRise

Drag and drop interactions in iRise are a versatile, highly configurable feature for creating high-impact simulations. On the high-fidelity end of the simulation spectrum, they can be integrated seamlessly with other iRise capabilities, such as dynamic displays, data operations and navigation flow, to visualize complex workflows and behaviors. Their ease of use, however, makes them just as appropriate for quick and dirty simulations of relatively simple interactions.

You can leverage this capability in iRise by invoking the Draggable property for Text, Image, Section, Table and Tile List widgets. Extending the basic interaction is accomplished with an event trigger called On Drop (Over Target), which functions like any other event trigger to invoke page actions.

In this tutorial, we'll create two versions of the same drag and drop interaction. The first will rely only on the attributes of the widget being dragged. The second will achieve a similar result by triggering a series of events involving both data and navigation.

Creating a basic drag and drop interaction

We'll start by creating a datasheet containing classic book information, including a book image, the title, and the author. (Note: if you completed the Tile Lists tutorial, you can reuse the datasheet you created for that tutorial.) You will also need a column with the the header Read. Add 5-10 records to the datasheet. The datasheet will look something like this:

BOOKS datasheet

Now create a new page in your Directory called Book List. Add a Tile List to the page. Call it Classic Books - Tile List, and change the Tile's dimensions to 200 x 280. You can leave the other attributes unchanged, but take note of the fact that the Tile, like a data row, has an attribute for sending a clicked record to the Clipboard (we'll use this feature in our second example).

Add a Section widget centered inside the Tile that is slightly smaller than the Tile. Give the Section a light gray background. Inside the Section, add an Image widget containing one of the book thumbnails that you added to your datasheet (just as a placeholder). Below that, add two Text widget placeholders, the first containing the text [title] and the second containing by [author].

Now drag the datasheet to the canvas on the left side of the page and choose Get Record. Map the data flow from the Get Record widget to the placeholders in the Tile. Your page will end up looking something like this:

Tile List

To the right of the Tile List, add a Section widget with the dimensions 220 x 600. Name the section Books read, change its Layout property to Vertical Layout, and disable both horizontal and vertical scroll bars. Give it a visible border or background color so it can be seen on the page. Finally, add a Text widget above the section containing the text Books I've read.

Make the section draggable

Drag and drop propertiesTo enable dragging for the Section widget contained within the Tile, select the widget, and in its Properties panel, choose 'Drag and relocate' for the Draggable attribute. This will reveal three new fields under the Draggable property. Leave Drag Handle blank, but for During Drag, select 'Drag ghost copy of widget'. This will reveal one more field, Opacity. Enter 50 in the Opacity field, and in the Restrict Drop To field, click the chooser icon and select the 'Books read' section in the Select Target Sections pop-up window.

This is all we need to make the sections within each Tile draggable in the browser. Launch the page in your browser to see the result. You should be able to drag a "ghost copy" of each section in the Tile List. If you drop it outside of the section on the right, nothing happens. If you drop it inside the section, it is added to that section and removed from the Tile List. As you drag new book records into the "Books I've Read" section, they are stacked vertically, the result of having chosen Vertical Layout for the section.

Triggering an On Drop (Over Target) event

We can achieve a similar result by using the drag and drop interaction to trigger an event that updates a record in the datasheet. Rather than modifying the interaction you already built, create a duplicate of the Book List page by right-clicking it in the Directory panel and choosing 'Copy', and then right-clicking in an empty area of the Directory and choosing 'Paste'.

In the duplicate page, select the Get BOOKS widget on the canvas and in its Properties panel, select the 'Where' radio button to open the Where dialog. Click the Add Rule button. In the first column, select 'Read'. Leave the second and third columns unchanged. Then place your cursor in the last column and press Enter on your keyboard. This will filter the records flowing into the Tile List so that only records with a null value in the 'Read' column will be displayed in the Tile List.

Filtering the BOOKS data records

Now let's set up the event that we'll trigger with the drag and drop interaction. Start by selecting the section inside the Tile and changing its Draggable property to 'Yes'. In the Events tab, expand the Show events for drop-down and choose 'On Drop (Over Target)'. This will reveal a new drop-down just below the first one. Click the chooser icon to the right of this drop-down and select the 'Books read' section in the Select Targets pop-up window. Then expand the drop-down list and choose 'Over Books read'.

Events panelFinally, click the +Add link under the Events pane and choose 'Record'. In the Choose Datasheet and Action pop-up, select Update Record on the right, and the BOOKS datasheet on the left. When you click OK, an Update BOOKS widget will be added to the canvas on the right side of the page, connected to the section in the Tile by an On Drop (Over Target) trigger.

Now we need to tell the simulation exactly how we want the record to be updated. To do this, we'll use a Constant widget. Drag a Constant from the Widget Toolbar to the canvas in the vicinity of the Update BOOKS widget. In the Constant's Properties panel, select the 'Read' field from the drop-down list at the top, and then type Yes in the list below it. Drag the Constant widget and release it on the Get BOOKS widget, choosing 'Send data' when prompted.

Because the clicked record has been sent to the Clipboard (remember the Send clicked record to Clipboard attribute in the Tile?), the Constant will be added to the Read column for just that record.

Now we need to refresh the page to complete the update. Add a Link widget to the canvas and choose Window Controls > Refresh in the Set Destination dialog. Drag the Get BOOKS widget to the Refresh widget to complete the navigation.

Populate the Books I’ve Read section

Only one thing remains, and that's populating the "Books I've read" section with the books the reviewer has dragged to the section. Rather than simply relocating the widgets, we'll add a single column data table to the section, and populate that with the titles of the books the reviewer dragged to the section.

Drag a Table widget into the Books read section and configure a 1-column data table with no header and no footer. Add a Text widget placeholder in the single table cell containing the text [title]. Now add a new Get BOOKS widget to the canvas near the data table, drag the record widget to the text placeholder, and select 'Title' in the Select a Field pop-up.

Finally, select the Get BOOKS widget on the canvas, and in its Properties panel, select the Where radio button. In the Where dialog, click Add Rule and choose 'Read' in the first column and type Yes in the last column. Click OK.

Navigation and data flow

Launch the page in your browser and test the new interaction. Now when you drag a book from the Tile List to the section, the title of the book will be added to the "Books I've read" section. Since the records flowing into the Tile List are also being filtered, the books added to the section on the right will be removed from the Tile List. Unlike the previous interaction, however, the other records will rearrange themselves to fill in the space left by the removed item.

Troubleshooting

If the datasheet doesn't update when you drag a book to the "Books I've read" section, first check that the Draggable attribute for the section inside the Tile is set to 'Yes'. If that doesn't do the trick, check that the Constant is updating the 'Read' field, and that the value is 'Yes'.