آموزش کشیدن و رها کردن در برنامه نویسی انگولار

4 سال پیش

امتیاز دهید post

آموزش کشیدن و رها کردن در برنامه نویسی انگولار

در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش کشیدن و رها کردن در برنامه نویسی انگولار خواهیم پرداخت.

ویژگی کشیدن و رها کردن به شما امکان می دهد با در دست گرفتن عنصر html، عنصر را با کشیدن و قرار دادن آن در مکان دیگری کنترل کنید.

برای کار با ویژگی های کشیدن و رها کردن در رابط کاربر Angular Mobile، باید ماژول حرکات را اضافه کنید.

همانطور که در زیر نشان داده شده است ابتدا فایل JavaScript را درون index.html اضافه کنید –

&lt;script src = "node_modules / mobile-angular-ui / dist / js / mobile-angular-ui.gestures.min.js"&gt; &lt;/script&gt;

1	<script src = "node_modules / mobile-angular-ui / dist / js / mobile-angular-ui.gestures.min.js"> </script>

بعداً ماژول حرکات را به صورت وابستگی در app.js اضافه کنید همانطور که در زیر نشان داده شده است –

var app=angular.module('myFirstApp', [
   'ngRoute',
   'mobile-angular-ui',
   'mobile-angular-ui.gestures'
]);

var app=angular.module('myFirstApp', [

'ngRoute',

'mobile-angular-ui',

'mobile-angular-ui.gestures'

]);

برای کشیدن مورد با استفاده از ماژول drag$ باید دستورالعمل سفارشی ایجاد کنیم.

نحو استفاده از ماژول drag$ به شرح زیر است –

$drag.bind(element, dragOptions, touchOptions);

1	$drag.bind(element, dragOptions, touchOptions);

مولفه ها

element – عنصر html که می خواهید بکشید.
dragOptions – این یک شی با جزئیات زیر است –

var dragOptions= {
   transform: $drag.TRANSLATE_BOTH,
   start: function(dragInfo, event){},
   end: function(dragInfo, event){},
   move: function(dragInfo, event){},
   cancel: function(dragInfo, event){}
};

var dragOptions= {

transform: $drag.TRANSLATE_BOTH,

start: function(dragInfo, event){},

end: function(dragInfo, event){},

move: function(dragInfo, event){},

cancel: function(dragInfo, event){}

};

برای تبدیل، می توانید از گزینه های زیر استفاده کنید –

$drag.NULL_TRANSFORM$ – هیچ تحرکی برای عنصر وجود ندارد.

drag.TRANSLATE_BOTH$ – عنصر در هر دو محور x و y حرکت می کند.

drag.TRANSLATE_HORIZONTAL$ – عنصر در محور x حرکت خواهد کرد.

drag.TRANSLATE_UP$ – عنصر در محور y منفی حرکت می کند.

drag.TRANSLATE_DOWN$ – این عنصر در یک محور مثبت حرکت می کند.

drag.TRANSLATE_LEFT$ – عنصر در محور x منفی حرکت می کند.

drag.TRANSLATE_RIGHT$ – عنصر در محور x مثبت حرکت می کند.

drag.TRANSLATE_VERTICAL$ – عنصر در محور y حرکت خواهد کرد.

drag.TRANSLATE_INSIDE$ – از عملکردی استفاده می شود که در زیر نشان داده شده است –

{
   transform: $drag.TRANSLATE_INSIDE(myElement)
}

{

transform: $drag.TRANSLATE_INSIDE(myElement)

}

draginfo – این یک نسخه توسعه یافته از ماژول touch$ است. این دارای جزئیات زیر است –

originalTransform – شی تبدیل $ نسبت به تبدیل CSS قبل از اینکه drag$ محدود شود.

originalRect – Bounding Client Rect برای عنصر مقید قبل از هرگونه عمل کشیدن.

startRect – Becting Client Rect برای عنصر مقید ثبت شده در رویداد start.

startTransform – رویداد تبدیل $ در شروع.

rect – Crediting Client Rect فعلی برای عنصر مقید.

تبدیل – فعلی transform$

تنظیم مجدد – عنصر بازگرداندن عملکرد به originalTransform.

لغو – عنصر بازیابی عملکرد برای شروعTransform.

touchOptions – شی option گزینه ای است که باید به سرویس touch$ زیرین منتقل شود.

همانطور که در زیر نشان داده شده است ، با استفاده از ماژول $ drag در داخل src / js / app.js یک دستورالعمل ایجاد کنید –

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.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()

}

);

}

};

}]);

بیایید یک نمونه کارایی از کشیدن یک عنصر را ببینیم –

Index.html

&lt;!DOCTYPE html&gt;
&lt;html&gt;
   &lt;head&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;title&gt;Mobile Angular UI Demo&lt;/title&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /&gt;
      &lt;meta name="apple-mobile-web-app-capable" content="yes" /&gt;
      &lt;meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimal-ui" /&gt;
      &lt;meta name="apple-mobile-web-app-status-bar-style" content="yes" /&gt;
      &lt;link rel="shortcut icon" href="/assets/img/favicon.png" type="image/x-icon" /&gt;
      &lt;link rel="stylesheet" href="node_modules/mobile-angular-ui/dist/css/mobile-angular-ui-hover.min.css" /&gt;
      &lt;link rel="stylesheet" href="node_modules/mobile-angular-ui/dist/css/mobile-angular-ui-base.min.css" /&gt;
      &lt;link rel="stylesheet" href="node_modules/mobile-angular-ui/dist/css/mobile-angular-ui-desktop.min.css" /&gt;
      &lt;script src="node_modules/angular/angular.min.js"&gt;&lt;/script&gt;
      &lt;script src="node_modules/angular-route/angular-route.min.js"&gt;&lt;/script&gt;
      &lt;script src="node_modules/mobile-angular-ui/dist/js/mobile-angular-ui.min.js"&gt;&lt;/script&gt;
      &lt;script src="node_modules/angular-route/angular-route.min.js"&gt;&lt;/script&gt;
      &lt;script src="node_modules/mobile-angular-ui/dist/js/mobile-angular-ui.gestures.min.js"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" href="src/css/app.css" /&gt;
      &lt;script src="src/js/app.js"&gt;&lt;/script&gt;
   &lt;/head&gt;
   &lt;body ng-app="myFirstApp" ng-controller="MainController"&gt;
      
      &lt;!-- Sidebars --&gt;
      &lt;div class="sidebar sidebar-left"&gt;
         &lt;div class="scrollable"&gt;
            &lt;h1 class="scrollable-header app-name"&gt;Tutorials&lt;/h1&gt;
            &lt;div class="scrollable-content"&gt;
               &lt;div class="list-group" ui-turn-off='uiSidebarLeft'&gt;
                  &lt;a class="list-group-item" href="/"&gt;Home Page &lt;/a&gt;
                     &lt;a class="list-group-item" href="#/academic"&gt;&lt;i class="fa fa-caret-right"&gt;&lt;/i&gt;Academic Tutorials &lt;/a&gt;
                     &lt;a class="list-group-item" href="#/bigdata"&gt;&lt;i class="fa fa-caret-right"&gt;&lt;/i&gt;Big Data &amp; Analytics &lt;/a&gt;
                     &lt;a class="list-group-item" href="#/computerProg"&gt;&lt;i class="fa fa-caret-right"&gt;&lt;/i&gt;Computer Programming &lt;/a&gt;
                     &lt;a class="list-group-item" href="#/computerscience"&gt;&lt;i class="fa fa-caret-right"&gt;&lt;/i&gt;Computer Science &lt;/a&gt;
                     &lt;a class="list-group-item" href="#/databases"&gt;&lt;i class="fa fa-caret-right"&gt;&lt;/i&gt;Databases &lt;/a&gt;
                     &lt;a class="list-group-item" href="#/devops"&gt;&lt;i class="fa fa-caret-right"&gt;&lt;/i&gt;DevOps &lt;/a&gt;
                  &lt;/div&gt;
               &lt;/div&gt;
            &lt;/div&gt;
         &lt;/div&gt;
         &lt;div class="sidebar sidebar-right"&gt;
            &lt;div class="scrollable"&gt;
               &lt;h1 class="scrollable-header app-name"&gt;eBooks&lt;/h1&gt;
               &lt;div class="scrollable-content"&gt;
                  &lt;div class="list-group" ui-toggle="uiSidebarRight"&gt;
                     &lt;a class="list-group-item" href="#/php"&gt;&lt;i class="fa fa-caret-right"&gt;&lt;/i&gt;PHP &lt;/a&gt;
                     &lt;a class="list-group-item" href="#/Javascript"&gt;&lt;i class="fa fa-caret-right"&gt;&lt;/i&gt;Javascript &lt;/a&gt;
                  &lt;/div&gt;
               &lt;/div&gt;
            &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="app"&gt;
         &lt;div class="navbar navbar-app navbar-absolute-top"&gt;
            &lt;div class="navbar-brand navbar-brand-center" ui-yield-to="title"&gt;
               TutorialsPoint
            &lt;/div&gt;
            &lt;div class="btn-group pull-left"&gt;
               &lt;div ui-toggle="uiSidebarLeft" class="btn sidebar-left-toggle"&gt;
                  &lt;i class="fa fa-th-large "&gt;&lt;/i&gt; Tutorials
               &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="btn-group pull-right" ui-yield-to="navbarAction"&gt;
               &lt;div ui-toggle="uiSidebarRight" class="btn sidebar-right-toggle"&gt;
                  &lt;i class="fal fa-search"&gt;&lt;/i&gt; eBooks
               &lt;/div&gt;
            &lt;/div&gt;
         &lt;/div&gt;
         &lt;div class="navbar navbar-app navbar-absolute-bottom"&gt;
            &lt;div class="btn-group justified"&gt;
               &lt;a ui-turn-on="aboutus_modal" class="btn btn-navbar"&gt;&lt;i class="fal fa-globe"&gt;&lt;/i&gt; About us&lt;/a&gt;
               &lt;a ui-turn-on="contactus_overlay" class="btn btn-navbar"&gt;&lt;i class="fal fa-map-marker-alt"&gt;&lt;/i&gt; Contact us&lt;/a&gt;
            &lt;/div&gt;
         &lt;/div&gt;

         &lt;!-- App body --&gt;
         &lt;div class='app-body'&gt;
            &lt;div class='app-content'&gt;
               &lt;ng-view&gt;&lt;/ng-view&gt;
            &lt;/div&gt;
         &lt;/div&gt;
      &lt;/div&gt;&lt;!-- ~ .app --&gt;
      &lt;!-- Modals and Overlays --&gt;
      &lt;div ui-yield-to="modals"&gt;&lt;/div&gt;
   &lt;/body&gt;
&lt;/html&gt;

<!DOCTYPE html>

<html>

<head>

<title>Mobile Angular UI Demo</title>

</head>

<h1 class="scrollable-header app-name">Tutorials</h1>

<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>

<h1 class="scrollable-header app-name">eBooks</h1>

<a class="list-group-item" href="#/Javascript"><i class="fa fa-caret-right"></i>Javascript </a>

</div>

TutorialsPoint

</div>

<i class="fa fa-th-large "></i> Tutorials

</div>

<i class="fal fa-search"></i> eBooks

</div>

<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>

<ng-view></ng-view>

</div>

</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.";
});

/* 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.";

});

عنصر کشیدن به داخل src / home / home اضافه می شود. html –

&lt;div style="height: 100%; width: 100%; padding: 40px;"&gt;
   &lt;div style="height: 100%; width: 100%; border: 1px solid #444; position: relative;"&gt;
      &lt;div drag-Item&gt;
         &lt;img src="src/img/test.png" width="100" height="100" /&gt;
      &lt;/div&gt;
   &lt;/div&gt;
&lt;/div&gt;

</div>

از تصویر برای کشیدن استفاده می شود همانطور که در زیر نشان داده شده است –

Drag
صفحه نمایش در مرورگر به شرح زیر است –

Drop
می توانید تصویر را در UI بکشید و هنگامی که ماوس آزاد شد ، دوباره به موقعیت اصلی باز می گردد همانطور که ما از ()drag.reset در داخل jhfu پایان استفاده کرده ایم.

$drag.bind($element, {
      transform: $drag.TRANSLATE_BOTH,
      end: function(drag) {
         drag.reset();
      }
   },
   {
      sensitiveArea: $element.parent()
   }
);

$drag.bind($element, {

transform: $drag.TRANSLATE_BOTH,

end: function(drag) {

drag.reset();

}

{

sensitiveArea: $element.parent()

}

);

منبع.

لیست جلسات قبل آموزش برنامه نویسی انگولار

امتیاز دهید post

برچسب ها : آموزش انگولار آموزش برنامه نویسی موبایل

نویسنده مطلب saber

آموزش کشیدن و رها کردن در برنامه نویسی انگولار

آموزش کشیدن و رها کردن در برنامه نویسی انگولار

مولفه ها

Index.html

src/js/app.js

لیست جلسات قبل آموزش برنامه نویسی انگولار

دیدگاه شما

بدون دیدگاه

آموزش کشیدن و رها کردن در برنامه نویسی انگولار

مولفه ها

Index.html

src/js/app.js

لیست جلسات قبل آموزش برنامه نویسی انگولار

دیدگاه شما

برای صرف‌نظر کردن از پاسخ‌گویی اینجا را کلیک نمایید.

بدون دیدگاه