DART Cookbook

Book Image

DART Cookbook

By : Ivo Balbaert

Book Image

DART Cookbook

By: Ivo Balbaert

Overview of this book

Dart Cookbook

Credits

About the Author

About the Author

About the Reviewers

About the Reviewers

www.PacktPub.com

www.PacktPub.com

Preface

Free Chapter

Working with Dart Tools

Working with Dart Tools

Configuring the Dart environment

Setting up the checked and production modes

Rapid Dart Editor troubleshooting

Hosting your own private pub mirror

Using Sublime Text 2 as an IDE

Compiling your app to JavaScript

Debugging your app in JavaScript for Chrome

Using the command-line tools

Solving problems when pub get fails

Shrinking the size of your app

Making a system call

Using snapshotting

Getting information from the operating system

Structuring, Testing, and Deploying an Application

Structuring, Testing, and Deploying an Application

Exiting from an app

Parsing command-line arguments

Structuring an application

Using a library from within your app

Microtesting your code with assert

Unit testing a Polymer web app

Adding logging to your app

Documenting your app

Profiling and benchmarking your app

Publishing and deploying your app

Using different settings in the checked and production modes

Working with Data Types

Working with Data Types

Concatenating strings

Using regular expressions

Strings and Unicode

Using complex numbers

Creating an enum

Flattening a list

Generating a random number within a range

Getting a random element from a list

Working with dates and times

Improving performance in numerical computations

Using SIMD for enhanced performance

Object Orientation

Object Orientation

Testing and converting types

Comparing two objects

Using a factory constructor

Building a singleton

Using reflection

Using annotations

Using the call method

Using noSuchMethod

Making toJSON and fromJSON methods in your class

Creating common classes for client and server apps

Handling Web Applications

Handling Web Applications

Responsive design

Sanitizing HTML

Using a browser's local storage

Using application cache to work offline

Preventing an onSubmit event from reloading the page

Dynamically inserting rows in an HTML table

Using CORS headers

Using keyboard events

Enabling drag-and-drop

Enabling touch events

Creating a Chrome app

Structuring a game project

Using WebGL in your app

Authorizing OAuth2 to Google services

Talking with JavaScript

Using JavaScript libraries

Working with Files and Streams

Working with Files and Streams

Reading and processing a file line by line

Writing to a file

Searching in a file

Concatenating files

Downloading a file

Working with blobs

Transforming streams

Working with Web Servers

Working with Web Servers

Creating a web server

Posting JSON-formatted data

Receiving data on the web server

Serving files with http_server

Using WebSockets

Using secure sockets and servers

Using a JSON web service

Working with Futures, Tasks, and Isolates

Working with Futures, Tasks, and Isolates

Writing a game loop

Error handling with Futures

Scheduling tasks using Futures

Running a recurring function

Using isolates in the Dart VM

Using isolates in web apps

Using multiple cores with isolates

Using the Worker Task framework

Working with Databases

Working with Databases

Storing data locally with IndexedDB

Using Lawndart to write offline web apps

Storing data in MySQL

Storing data in PostgreSQL

Storing data in Oracle

Storing data in MongoDB

Storing data in RethinkDB

Polymer Dart Recipes

Polymer Dart Recipes

Data binding with polymer.dart

Binding and repeating over a list

Binding to a map

Using custom attributes and template conditionals

Binding to an input text field or a text area

Binding to a checkbox

Binding to radio buttons

Binding to a selected field

Polymer elements with JavaScript interop

Extending DOM elements

Working with custom elements

Automatic node finding

Internationalizing a Polymer app

Working with Angular Dart

Working with Angular Dart

Setting up an Angular app

Using a controller

Using a component

Using formatters as filters

Creating a view

Using a service

Deploying your app

Index

Customer Reviews

5 star

0

4 star

0

3 star

0

2 star

0

1 star

0

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

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">...
```