From 37c51ed95e113d91f6e557de4bc2428998015498 Mon Sep 17 00:00:00 2001 From: Kumaresan <36756050+kumaresan-subramani@users.noreply.github.com> Date: Thu, 21 Nov 2019 14:39:04 +0530 Subject: [PATCH 1/4] Update package.json --- package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 25513978a..1d83c7403 100644 --- a/package.json +++ b/package.json @@ -36,13 +36,13 @@ "angular-in-memory-web-api": "~0.3.0", "systemjs": "0.19.40", "core-js": "^2.4.1", - "rxjs": "5.0.1", + "rxjs": "5.4.2", "zone.js": "^0.8.4" }, "devDependencies": { "concurrently": "^3.2.0", "lite-server": "^2.2.2", - "typescript": "~2.1.0", + "typescript": "~3.6.3", "canonical-path": "0.0.2", "tslint": "^3.15.1", From eb825a777739acad2df3312d2bb642854a4f7d53 Mon Sep 17 00:00:00 2001 From: Kumaresan <36756050+kumaresan-subramani@users.noreply.github.com> Date: Tue, 28 Jul 2020 17:19:21 +0530 Subject: [PATCH 2/4] Update app.component.ts --- src/app/app.component.ts | 26 +++++++++++++++++++++----- 1 file changed, 21 insertions(+), 5 deletions(-) diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 7fb173cd0..a2349d2fb 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,7 +1,23 @@ -import { Component } from '@angular/core'; +import { Component, ViewChild } from '@angular/core'; + import { Draggable, Droppable, DropEventArgs } from '@syncfusion/ej2-base'; -@Component({ - selector: 'my-app', - template: `

Hello {{name}}

`, + @Component({ + selector: 'my-app', + template:`
+

Drop target

+

Draggable Element

+
` }) -export class AppComponent { name = 'Angular'; } + +export class AppComponent { + @ViewChild('droppable',{static: false})element: any; + @ViewChild('draggable',{static: false})element1: any; + ngAfterViewInit() { + let draggable: Draggable = new Draggable(document.getElementById('draggable'), {clone: false}); + let droppable: Droppable = new Droppable(document.getElementById('droppable'), { + drop: (e: DropEventArgs) => { + e.droppedElement.querySelector('.drag').textContent = 'Dropped'; + } + }); + } +} From 44d817c70a08a93dec9e37dba19dbb2a3717eb32 Mon Sep 17 00:00:00 2001 From: Kumaresan <36756050+kumaresan-subramani@users.noreply.github.com> Date: Tue, 28 Jul 2020 17:19:53 +0530 Subject: [PATCH 3/4] Update styles.css --- src/styles.css | 36 ++++++++++++++++++++++++++++++++++++ 1 file changed, 36 insertions(+) diff --git a/src/styles.css b/src/styles.css index 58e1a7d9a..2d7fa4391 100644 --- a/src/styles.css +++ b/src/styles.css @@ -3,3 +3,39 @@ h1 { font-family: Arial, Helvetica, sans-serif; font-size: 250%; } +#loader { + color: #008cff; + height: 40px; + left: 45%; + position: absolute; + top: 45%; + width: 30%; +} +#draggable{ + height: 100px; + width:150px; + border: 1px solid #cecece; + cursor: move; + background: #cdffe3; + user-select: none; + touch-action: none; +} +.drag{ + padding-top: 40px; + text-align: center; + +} +.drop{ + padding-top: 23px; + text-align: center; + +} +#droppable{ + margin: 5px; + line-height: 170px; + font-size: 14px; + width: 250px; + border: 1px solid #cecece; + background: #f6f6f6; + touch-action: none; +} From d20c5fe9119a836d8a6ce9975e55c4ebc268400a Mon Sep 17 00:00:00 2001 From: Kumaresan <36756050+kumaresan-subramani@users.noreply.github.com> Date: Tue, 28 Jul 2020 17:20:27 +0530 Subject: [PATCH 4/4] Update systemjs.config.js --- src/systemjs.config.js | 24 +++++++++++++----------- 1 file changed, 13 insertions(+), 11 deletions(-) diff --git a/src/systemjs.config.js b/src/systemjs.config.js index 129704a37..81cd62f5d 100644 --- a/src/systemjs.config.js +++ b/src/systemjs.config.js @@ -6,25 +6,27 @@ System.config({ paths: { // paths serve as alias - 'npm:': 'node_modules/' + "angular:": "https://unpkg.com/@angular/", + "syncfusion:": "https://cdn.syncfusion.com/ej2/", }, // map tells the System loader where to look for things map: { // our app is within the app folder 'app': 'app', - + "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", // angular bundles - '@angular/core': 'npm:@angular/core/bundles/core.umd.js', - '@angular/common': 'npm:@angular/common/bundles/common.umd.js', - '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js', - '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js', - '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js', - '@angular/http': 'npm:@angular/http/bundles/http.umd.js', - '@angular/router': 'npm:@angular/router/bundles/router.umd.js', - '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js', + '@angular/core': 'angular:core@5.2.10/bundles/core.umd.js', + '@angular/common': 'angular:common@5.2.10/bundles/common.umd.js', + '@angular/compiler': 'angular:compiler@5.2.10/bundles/compiler.umd.js', + '@angular/http': 'angular:http@5.2.10/bundles/http.umd.js', + '@angular/forms': 'angular:forms@5.2.10/bundles/forms.umd.js', + '@angular/router': 'angular:router@5.2.10/bundles/router.umd.js', + '@angular/platform-browser': 'angular:platform-browser@5.2.10/bundles/platform-browser.umd.js', + '@angular/platform-browser-dynamic': 'angular:platform-browser-dynamic@5.2.10/bundles/platform-browser-dynamic.umd.js', + '@angular/material': 'angular:material@5.2.10/bundles/material.umd.js', + 'rxjs': 'https://unpkg.com/rxjs@5.5.10', // other libraries - 'rxjs': 'npm:rxjs', 'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js' }, // packages tells the System loader how to load when no filename and/or no extension