Skip to content

Commit 20992ac

Browse files
eastcoastdevelopereastcoastdeveloper
committed
Initial commit
0 parents  commit 20992ac

13 files changed

+972
-0
lines changed

‎README.md

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
# drag-and-drop-javascript
2+
3+
[Edit on StackBlitz ⚡️](https://stackblitz.com/edit/drag-and-drop-javascript)

‎angular.json

+100
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
{
2+
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
3+
"version": 1,
4+
"newProjectRoot": "projects",
5+
"projects": {
6+
"demo": {
7+
"root": "",
8+
"sourceRoot": "src",
9+
"projectType": "application",
10+
"prefix": "app",
11+
"schematics": {},
12+
"architect": {
13+
"build": {
14+
"builder": "@angular-devkit/build-angular:browser",
15+
"options": {
16+
"outputPath": "dist/demo",
17+
"index": "src/index.html",
18+
"main": "src/main.ts",
19+
"polyfills": "src/polyfills.ts",
20+
"tsConfig": "src/tsconfig.app.json",
21+
"assets": [
22+
"src/favicon.ico",
23+
"src/assets"
24+
],
25+
"styles": [
26+
"src/styles.css"
27+
],
28+
"scripts": []
29+
},
30+
"configurations": {
31+
"production": {
32+
"fileReplacements": [
33+
{
34+
"replace": "src/environments/environment.ts",
35+
"with": "src/environments/environment.prod.ts"
36+
}
37+
],
38+
"optimization": true,
39+
"outputHashing": "all",
40+
"sourceMap": false,
41+
"extractCss": true,
42+
"namedChunks": false,
43+
"aot": true,
44+
"extractLicenses": true,
45+
"vendorChunk": false,
46+
"buildOptimizer": true
47+
}
48+
}
49+
},
50+
"serve": {
51+
"builder": "@angular-devkit/build-angular:dev-server",
52+
"options": {
53+
"browserTarget": "demo:build"
54+
},
55+
"configurations": {
56+
"production": {
57+
"browserTarget": "demo:build:production"
58+
}
59+
}
60+
},
61+
"extract-i18n": {
62+
"builder": "@angular-devkit/build-angular:extract-i18n",
63+
"options": {
64+
"browserTarget": "demo:build"
65+
}
66+
},
67+
"test": {
68+
"builder": "@angular-devkit/build-angular:karma",
69+
"options": {
70+
"main": "src/test.ts",
71+
"polyfills": "src/polyfills.ts",
72+
"tsConfig": "src/tsconfig.spec.json",
73+
"karmaConfig": "src/karma.conf.js",
74+
"styles": [
75+
"styles.css"
76+
],
77+
"scripts": [],
78+
"assets": [
79+
"src/favicon.ico",
80+
"src/assets"
81+
]
82+
}
83+
},
84+
"lint": {
85+
"builder": "@angular-devkit/build-angular:tslint",
86+
"options": {
87+
"tsConfig": [
88+
"src/tsconfig.app.json",
89+
"src/tsconfig.spec.json"
90+
],
91+
"exclude": [
92+
"**/node_modules/**"
93+
]
94+
}
95+
}
96+
}
97+
}
98+
},
99+
"defaultProject": "demo"
100+
}

‎package.json

+45
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
{
2+
"name": "angular",
3+
"version": "0.0.0",
4+
"private": true,
5+
"dependencies": {
6+
"@angular/animations": "^11.0.8",
7+
"@angular/common": "^11.0.8",
8+
"@angular/compiler": "^11.0.8",
9+
"@angular/core": "^11.0.8",
10+
"@angular/forms": "^11.0.8",
11+
"@angular/platform-browser": "^11.0.8",
12+
"@angular/platform-browser-dynamic": "^11.0.8",
13+
"@angular/router": "^11.0.8",
14+
"rxjs": "^6.6.3",
15+
"tslib": "^2.1.0",
16+
"zone.js": "^0.11.3"
17+
},
18+
"scripts": {
19+
"ng": "ng",
20+
"start": "ng serve",
21+
"build": "ng build",
22+
"test": "ng test",
23+
"lint": "ng lint",
24+
"e2e": "ng e2e"
25+
},
26+
"devDependencies": {
27+
"@angular-devkit/build-angular": "~0.1100.4",
28+
"@angular/cli": "~11.0.4",
29+
"@angular/compiler-cli": "~11.0.4",
30+
"@types/jasmine": "~3.6.0",
31+
"@types/node": "^12.11.1",
32+
"codelyzer": "^6.0.0",
33+
"jasmine-core": "~3.6.0",
34+
"jasmine-spec-reporter": "~5.0.0",
35+
"karma": "~5.1.0",
36+
"karma-chrome-launcher": "~3.1.0",
37+
"karma-coverage": "~2.0.3",
38+
"karma-jasmine": "~4.0.0",
39+
"karma-jasmine-html-reporter": "^1.5.0",
40+
"protractor": "~7.0.0",
41+
"ts-node": "~8.3.0",
42+
"tslint": "~6.1.0",
43+
"typescript": "~4.0.2"
44+
}
45+
}

‎src/app/app.component.html

+53
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
<div class="wrapper">
2+
<header [ngClass]="{'border-btm':items.length > 0}">
3+
<p>Drag-Drop UI</p>
4+
<small>&mdash;&nbsp;&nbsp;No Libraries or Packages&nbsp;&nbsp;&mdash;</small>
5+
<div class="add-btn">Add Directory</div>
6+
<div class="add-new">
7+
<input placeholder="Add directory name" #newDirectory [(ngModel)]="itemTitle" (keydown)="getKeyCode($event)" />
8+
<button (click)="itemAdded()">Add</button>
9+
</div>
10+
</header>
11+
<div class="selected-content" [ngClass]="{'hasDirectories': items.length > 0}">
12+
<div class="child-container" *ngFor="let item of items; let i = index" id="{{'group' + i}}">
13+
<hr>
14+
<p class="group-index">{{items[i].title}}</p>
15+
<div class="delete" (click)="deleteItem(i)">
16+
<i>&times;</i>
17+
<div class="faux-btn"></div>
18+
</div>
19+
<div class="drop-zone">
20+
<p class="ddText">Drag & Drop</p>
21+
</div>
22+
<div class="toggle-block">
23+
<p *ngIf="uploadedCount[i] != undefined && uploadedCount[i].length > 0">{{ uploadedCount[i].length }} Items</p>
24+
<ul class="dragged-items"></ul>
25+
<span (click)="toggleBlock(i)" class="arrow" *ngIf="uploadedCount[i] != undefined && uploadedCount[i].length > 0">&#9660;</span>
26+
</div>
27+
</div>
28+
</div>
29+
<div class="add-btn group">Add Group Item</div>
30+
<div class="add-new mr-20">
31+
<input placeholder="Add group item" (keydown)="addGroupKeyCode($event)" [(ngModel)]="itemName" #newGroup class="mt-10" />
32+
<button (click)="addGroup()" class="mt-10">Add</button>
33+
</div>
34+
<div class="unsorted">
35+
<div *ngFor="let items of result; let i = index">
36+
<div *ngFor="let type of result[i].items; let j = index" draggable="true" (dragstart)="dragStartHandler($event)"
37+
(dragend)="dragEndHandler($event)" #typeName [attr.data-group]="i" [attr.data-name]="j">
38+
<div>
39+
<p>{{type.name}}</p>
40+
<span>&times;</span>
41+
<div class="delete-item" (click)="deleteName(i, j)"></div>
42+
</div>
43+
</div>
44+
<div class="add-new-name" *ngIf="result[i].items.length > 0">
45+
<span (click)="addNamedItem(i)">&#43;</span>
46+
<div class="add-new" *ngIf="addNewItem[i].active">
47+
<input placeholder="Add new item" [(ngModel)]="groupItem" (keydown)="addNewItemField($event,i)" />
48+
<button (click)="pushNamedItem(i)">Add</button>
49+
</div>
50+
</div>
51+
</div>
52+
</div>
53+
</div>

0 commit comments

Comments
 (0)