Drag Event

Drag event is a set of events that are triggered when the user drags on a gesture-enabled element. The following table defines the triggered events.

Table of Contents

  1. Drag Events
  2. Options
  3. Example

Drag Events

Event Description
dragstart Triggered when a touch point is placed on the touch surface.
drag Triggered when a touch point is moved along the touch surface.
dragend Triggered when a touch point is removed from the touch surface.
dragcancel Triggered when the touch is cancelled or another gesture is triggered.

Options

Option Type Description
blockHorizontal Boolean Prevents the default browser behavior when horizontal dragging movement occurs with care. This makes the element a blocking element.

When using the drag gesture, set this to true.
blockVertical Boolean Prevents the default browser behavior when vertical dragging movement occurs with care. This makes the element a blocking element.

When using the drag gesture, set this to true.
threshold Integer Minimum required movement before the drag event is triggered.
delay Integer Delay used for the drag lock.

The drag lock kicks in when the delta timestamp is bigger than the delay. This ensures that locking occurs only when the direction can be reliably determined.

Example

The following example shows how to use drag events.

HTML

<div class="ui-page ui-page-active" id="pageDrag">
	<header class="ui-header">
		<h2 class="ui-title">Drag Event</h2>
	</header>
	<div id="content" class="ui-content content-padding"></div>
</div>

Javascript

(function() {
	var page = document.getElementById("pageDrag");
	page.addEventListener("pagebeforeshow", function() {
		var content = document.getElementById("content");
		tau.event.enableGesture(content, new tau.event.gesture.Drag({
			blockVertical: true
		}));

		content.addEventListener("dragstart", function(e) {
			console.log("drag start");
		});

		content.addEventListener("drag", function(e) {
			console.log("direction = " + e.detail.direction);
		});

		content.addEventListener("dragend", function(e) {
			console.log("drag end");
		});
	});
}());