Mobile Angular UI – Drag and Drop
”; Previous Next
Drag and drop feature allows you to take control of a html element by grabbing it and dragging and placing the element to a different location.
To work with drag and drop features in Mobile Angular UI, you need to add the gestures module.
First add the JavaScript file inside index.html as shown below −
<script src=”node_modules/mobile-angular-ui/dist/js/mobile-angular-ui.gestures.min.js”></script>
Later add the gestures module as a dependency in app.js as shown below −
var app=angular.module(”myFirstApp”, [
”ngRoute”,
”mobile-angular-ui”,
”mobile-angular-ui.gestures”
]);
We need to create a custom directive to drag the item, using the $drag module.
The syntax to use $drag module is as follows −
$drag.bind(element, dragOptions, touchOptions);
Parameters
element − The html element you want to drag.
dragOptions − It is an object with the following details −
var dragOptions= {
transform: $drag.TRANSLATE_BOTH,
start: function(dragInfo, event){},
end: function(dragInfo, event){},
move: function(dragInfo, event){},
cancel: function(dragInfo, event){}
};
For transform, you can make use of following options −
$drag.NULL_TRANSFORM − no transform movement for the element.
$drag.TRANSLATE_BOTH − The element will move on both x and y axis.
$drag.TRANSLATE_HORIZONTAL − The element will move on x axis.
$drag.TRANSLATE_UP − The element will move on the negative y axis.
$drag.TRANSLATE_DOWN − The element will move on a positive y axis.
$drag.TRANSLATE_LEFT − The element will move on the negative x axis.
$drag.TRANSLATE_RIGHT − The element will move on the positive x axis.
$drag.TRANSLATE_VERTICAL − The element will move on y axis.
$drag.TRANSLATE_INSIDE − It makes use of a function as shown below −
{
transform: $drag.TRANSLATE_INSIDE(myElement)
}
The start, end, move, cancel is a function with draginfo and event details as params.
draginfo − It is an extended version of $touch module. It has following details −
originalTransform − The $transform object relative to CSS transform before $drag is bound.
originalRect − The Bounding Client Rect for bound element before any drag action.
startRect − The Bounding Client Rect for bound element registered at start event.
startTransform − The $transform at start event.
rect − The current Bounding Client Rect for bound element.
transform − The current $transform.
reset − A function restoring element to originalTransform.
undo − A function restoring element to startTransform.
touchOptions − is an option object to be passed to underlying $touch service.
Create a directive using $drag module inside src/js/app.js as shown below −
app.directive(”dragItem”, [”$drag”, function($drag) {
return {
controller: function($scope, $element) {
$drag.bind($element,
{
transform: $drag.TRANSLATE_BOTH,
end: function(drag) {
drag.reset();
}
},
{
sensitiveArea: $element.parent()
}
);
}
};
}]);
Let us see a working example of dragging an element −
Index.html
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″ />
<title>Mobile Angular UI Demo</title>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″ />
<meta name=”apple-mobile-web-app-capable” content=”yes” />
<meta name=”viewport” content=”user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimal-ui” />
<meta name=”apple-mobile-web-app-status-bar-style” content=”yes” />
<link rel=”shortcut icon” href=”/assets/img/favicon.png” type=”image/x-icon” />
<link rel=”stylesheet” href=”node_modules/mobile-angular-ui/dist/css/mobile-angular-ui-hover.min.css” />
<link rel=”stylesheet” href=”node_modules/mobile-angular-ui/dist/css/mobile-angular-ui-base.min.css” />
<link rel=”stylesheet” href=”node_modules/mobile-angular-ui/dist/css/mobile-angular-ui-desktop.min.css” />
<script src=”node_modules/angular/angular.min.js”></script>
<script src=”node_modules/angular-route/angular-route.min.js”></script>
<script src=”node_modules/mobile-angular-ui/dist/js/mobile-angular-ui.min.js”></script>
<script src=”node_modules/angular-route/angular-route.min.js”></script>
<script src=”node_modules/mobile-angular-ui/dist/js/mobile-angular-ui.gestures.min.js”></script>
<link rel=”stylesheet” href=”src/css/app.css” />
<script src=”src/js/app.js”></script>
</head>
<body ng-app=”myFirstApp” ng-controller=”MainController”>
<!– Sidebars –>
<div class=”sidebar sidebar-left”>
<div class=”scrollable”>
<h1 class=”scrollable-header app-name”>Tutorials</h1>
<div class=”scrollable-content”>
<div class=”list-group” ui-turn-off=”uiSidebarLeft”>
<a class=”list-group-item” href=”/”>Home Page </a>
<a class=”list-group-item” href=”#/academic”><i class=”fa fa-caret-right”></i>Academic Tutorials </a>
<a class=”list-group-item” href=”#/bigdata”><i class=”fa fa-caret-right”></i>Big Data & Analytics </a>
<a class=”list-group-item” href=”#/computerProg”><i class=”fa fa-caret-right”></i>Computer Programming </a>
<a class=”list-group-item” href=”#/computerscience”><i class=”fa fa-caret-right”></i>Computer Science </a>
<a class=”list-group-item” href=”#/databases”><i class=”fa fa-caret-right”></i>Databases </a>
<a class=”list-group-item” href=”#/devops”><i class=”fa fa-caret-right”></i>DevOps </a>
</div>
</div>
</div>
</div>
<div class=”sidebar sidebar-right”>
<div class=”scrollable”>
<h1 class=”scrollable-header app-name”>eBooks</h1>
<div class=”scrollable-content”>
<div class=”list-group” ui-toggle=”uiSidebarRight”>
<a class=”list-group-item” href=”#/php”><i class=”fa fa-caret-right”></i>PHP </a>
<a class=”list-group-item” href=”#/Javascript”><i class=”fa fa-caret-right”></i>Javascript </a>
</div>
</div>
</div>
</div>
<div class=”app”>
<div class=”navbar navbar-app navbar-absolute-top”>
<div class=”navbar-brand navbar-brand-center” ui-yield-to=”title”>
TutorialsPoint
</div>
<div class=”btn-group pull-left”>
<div ui-toggle=”uiSidebarLeft” class=”btn sidebar-left-toggle”>
<i class=”fa fa-th-large “></i> Tutorials
</div>
</div>
<div class=”btn-group pull-right” ui-yield-to=”navbarAction”>
<div ui-toggle=”uiSidebarRight” class=”btn sidebar-right-toggle”>
<i class=”fal fa-search”></i> eBooks
</div>
</div>
</div>
<div class=”navbar navbar-app navbar-absolute-bottom”>
<div class=”btn-group justified”>
<a ui-turn-on=”aboutus_modal” class=”btn btn-navbar”><i class=”fal fa-globe”></i> About us</a>
<a ui-turn-on=”contactus_overlay” class=”btn btn-navbar”><i class=”fal fa-map-marker-alt”></i> Contact us</a>
</div>
</div>
<!– App body –>
<div class=”app-body”>
<div class=”app-content”>
<ng-view></ng-view>
</div>
</div>
</div><!– ~ .app –>
<!– Modals and Overlays –>
<div ui-yield-to=”modals”></div>
</body>
</html>
src/js/app.js
/* eslint no-alert: 0 */
”use strict”;
//
// Here is how to define your module
// has dependent on mobile-angular-ui
//
var app=angular.module(”myFirstApp”, [
”ngRoute”,
”mobile-angular-ui”,
”mobile-angular-ui.gestures”
]);
app.config(function($routeProvider, $locationProvider) {
$routeProvider
.when(“/”, {
templateUrl : “src/home/home.html”
});
$locationProvider.html5Mode({enabled:true, requireBase:false});
});
app.directive(”dragItem”, [”$drag”, function($drag) {
return {
controller: function($scope, $element) {
$drag.bind($element,
{
transform: $drag.TRANSLATE_BOTH,end: function(drag) {
drag.reset();
}
},
{
sensitiveArea: $element.parent()
}
);
}
};
}]);
app.controller(”MainController”, function($rootScope, $scope, $routeParams) {
$scope.msg=”Welcome to Tutorialspoint!”
$scope.js=”JavaScript is a lightweight, interpreted programming language. It is designed
for creating network-centric applications. It is
complimentary to and integrated with Java.
JavaScript is very easy to implement because it
is integrated with HTML. It is open and cross-platform.”;
$scope.angularjs=”AngularJS is a very powerful
JavaScript Framework. It is used in Single Page
Application (SPA) projects. It extends HTML DOM
with additional attributes and makes it more
responsive to user actions. AngularJS is open
source, completely free, and used by thousands of
developers around the world. It is licensed under the Apache license version 2.0.”;
$scope.reactjs=”React is a front-end library
developed by Facebook. It is used for handling
the view layer for web and mobile apps. ReactJS
allows us to create reusable UI components. It is
currently one of the most popular JavaScript
libraries and has a strong foundation and large community behind it.”;
});
The drag element is added inside src/home/home.html −
<div style=”height: 100%;