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()
   }
);