Sign In Start Free Trial
Account

Add to playlist

Create a Playlist

Modal Close icon
You need to login to use this feature.
  • DART Cookbook
  • Toc
  • feedback
DART Cookbook

DART Cookbook

By : Ivo Balbaert
4 (2)
close
DART Cookbook

DART Cookbook

4 (2)
By: Ivo Balbaert

Overview of this book

If you are a Dart developer looking to sharpen your skills, and get insight and tips on how to put that knowledge into practice, then this book is for you. You should also have a basic knowledge of HTML, and how web applications with browser clients and servers work, in order to build dynamic Dart applications.
Table of Contents (13 chapters)
close
12
Index

Enabling drag-and-drop


Imagine developing a board game and the player has to use the keyboard to move the pieces; this wouldn't be acceptable anymore. Before HTML5, drag-and-drop using the mouse was a feature that had to be implemented through an external library like Dojo or jQuery. However, HTML5 provides native browser support to make nearly every element on a web page draggable, thus allowing more user-friendly web apps. This recipe shows you how to implement drag-and-drop (abbreviated as DnD) with Dart.

How to do it...

Run the drag_drop project. The result is a board of images as shown in the following screenshot, where the images are draggable and you can swap an image with any other image, as shown in the following screenshot:

Drag-and-drop images

Perform the following steps to enable drag-and-drop

  1. The elements that we want to drag-and-drop must get the draggable attribute in HTML, so in drag_drop.html, we indicate this for the <div> elements of the board:

    <div id="tiles">...

Unlock full access

Continue reading for free

A Packt free trial gives you instant online access to our library of over 7000 practical eBooks and videos, constantly updated with the latest in tech
bookmark search playlist font-size

Change the font size

margin-width

Change margin width

day-mode

Change background colour

Close icon Search
Country selected

Close icon Your notes and bookmarks

Delete Bookmark

Modal Close icon
Are you sure you want to delete it?
Cancel
Yes, Delete