Mobile Angular UI - Sürükle ve Bırak
Sürükle ve bırak özelliği, bir html öğesini kavrayarak ve öğeyi farklı bir konuma sürükleyip yerleştirerek kontrol etmenizi sağlar.
Mobile Angular UI'de sürükle ve bırak özellikleriyle çalışmak için hareketler modülünü eklemeniz gerekir.
Öncelikle JavaScript dosyasını aşağıda gösterildiği gibi index.html içine ekleyin -
<script src="node_modules/mobile-angular-ui/dist/js/mobile-angular-ui.gestures.min.js"></script>
Daha sonra, hareketler modülünü aşağıda gösterildiği gibi app.js'ye bağımlılık olarak ekleyin -
var app=angular.module('myFirstApp', [
'ngRoute',
'mobile-angular-ui',
'mobile-angular-ui.gestures'
]);
Öğeyi sürüklemek için $ drag modülünü kullanarak özel bir yönerge oluşturmamız gerekiyor.
$ Drag modülünü kullanmanın sözdizimi aşağıdaki gibidir -
$drag.bind(element, dragOptions, touchOptions);
Parametreler
element - Sürüklemek istediğiniz html öğesi.
dragOptions - Aşağıdaki detaylara sahip bir nesnedir -
var dragOptions= {
transform: $drag.TRANSLATE_BOTH,
start: function(dragInfo, event){},
end: function(dragInfo, event){},
move: function(dragInfo, event){},
cancel: function(dragInfo, event){}
};
İçin dönüşümü , seçeneklerin aşağıdaki yararlanabilir -
$ drag.NULL_TRANSFORM - öğe için dönüştürme hareketi yok.
$ drag.TRANSLATE_BOTH - Eleman hem x hem de y ekseninde hareket edecektir.
$ drag.TRANSLATE_HORIZONTAL - Eleman x ekseninde hareket edecektir.
$ drag.TRANSLATE_UP - Öğe, negatif y ekseninde hareket edecektir.
$ drag.TRANSLATE_DOWN - Öğe, pozitif bir y ekseninde hareket edecektir.
$ drag.TRANSLATE_LEFT - Eleman, negatif x ekseninde hareket edecektir.
$ drag.TRANSLATE_RIGHT - Eleman, pozitif x ekseninde hareket edecektir.
$ drag.TRANSLATE_VERTICAL - Eleman y ekseninde hareket edecektir.
$ drag.TRANSLATE_INSIDE - Aşağıda gösterildiği gibi bir işlevi kullanır -
{
transform: $drag.TRANSLATE_INSIDE(myElement)
}
Başlangıç, bitiş, taşıma, iptal, draginfo ve olay ayrıntılarını parametreler olarak içeren bir işlevdir .
draginfo- $ touch modülünün genişletilmiş bir sürümüdür. Aşağıdaki ayrıntılara sahiptir -
originalTransform- $ drag bağlanmadan önce CSS dönüşümüne göre $ transform nesnesi .
originalRect - Herhangi bir sürükleme eyleminden önce bağlanan öğe için Sınırlayıcı İstemci Dikkati.
startRect - Başlangıç etkinliğinde kaydedilen bağlı öğe için Sınırlayıcı İstemci Dikkati.
startTransform- Başlangıç olayındaki $ dönüşümü.
rect - Bağlı öğe için geçerli Sınırlayıcı İstemci Dikkati.
transform- Geçerli $ dönüşümü.
reset - Öğeyi originalTransform'a geri yükleyen bir işlev.
undo - startTransform'a öğe geri yükleyen bir işlev.
touchOptions - temel $ touch hizmetine iletilecek bir seçenek nesnesidir.
Src / js / app.js içinde aşağıda gösterildiği gibi $ drag modülünü kullanarak bir yönerge oluşturun -
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()
}
);
}
};
}]);
Bir öğeyi sürüklemenin çalışan bir örneğini görelim -
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.";
});
Sürükleme öğesi src / home / home.html içine eklenir -
<div style="height: 100%; width: 100%; padding: 40px;">
<div style="height: 100%; width: 100%; border: 1px solid #444; position: relative;">
<div drag-Item>
<img src="src/img/test.png" width="100" height="100" />
</div>
</div>
</div>
Aşağıda gösterildiği gibi bir görüntü sürüklemek için kullanılır -
Tarayıcıdaki ekran aşağıdaki gibidir -
Görüntüyü kullanıcı arayüzüne sürükleyebilirsiniz ve fare serbest bırakıldığında, son işlevi içinde drag.reset () kullandığımız için orijinal konumuna geri dönecektir .
$drag.bind($element, {
transform: $drag.TRANSLATE_BOTH,
end: function(drag) {
drag.reset();
}
},
{
sensitiveArea: $element.parent()
}
);