Skip to content

Commit 1b24254

Browse files
author
Andrei Kraykov
committed
Drag and Drop directive for file browser
1 parent 62936d8 commit 1b24254

File tree

4 files changed

+241
-4
lines changed

4 files changed

+241
-4
lines changed

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
/nbproject/private/
22
nbproject/
33
node_modules/
4+
.idea/

‎dist/angular-filemanager.min.js‎

Lines changed: 4 additions & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/js/directives/and-drag-drop.js‎

Lines changed: 211 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,211 @@
1+
var module = angular.module("lvl.directives.dragdrop", ['lvl.services']);
2+
3+
module.directive('lvlDraggable', ['$rootScope', 'uuid','$compile', function ($rootScope, uuid) {
4+
return {
5+
restrict: 'A',
6+
link: function (scope, el, attrs, controller) {
7+
var isEnabled = scope.$eval(attrs.lvlDraggable);
8+
if(isEnabled) {
9+
angular.element(el).attr("draggable", "true");
10+
var id = angular.element(el).attr("id");
11+
12+
if (!id) {
13+
id = uuid.new()
14+
angular.element(el).attr("id", id);
15+
}
16+
el.bind("dragstart", function (e) {
17+
e.originalEvent.dataTransfer.setData('text', id);
18+
e.originalEvent.dataTransfer.setDragImage(document.getElementById('file-drag-target'),40,30);
19+
console.log('drag');
20+
$rootScope.$emit("LVL-DRAG-START");
21+
});
22+
23+
el.bind("dragend", function (e) {
24+
$rootScope.$emit("LVL-DRAG-END");
25+
});
26+
}
27+
}
28+
};
29+
}]);
30+
31+
module.directive('lvlDropTarget', ['$rootScope', 'uuid', function ($rootScope, uuid) {
32+
return {
33+
restrict: 'A',
34+
scope: {
35+
onDrop: '&'
36+
},
37+
link: function (scope, el, attrs, controller) {
38+
var id = angular.element(el).attr("id");
39+
if (!id) {
40+
id = uuid.new();
41+
angular.element(el).attr("id", id);
42+
}
43+
44+
var isEnabled = scope.$eval(attrs.lvlDropTarget);
45+
if(isEnabled){
46+
el.bind("dragover", function (e) {
47+
if (e.preventDefault) {
48+
e.preventDefault(); // Necessary. Allows us to drop.
49+
}
50+
51+
e.originalEvent.dataTransfer.dropEffect = 'move'; // See the section on the originalEvent.dataTransfer object.
52+
return false;
53+
});
54+
55+
el.bind("dragenter", function (e) {
56+
// this / e.target is the current hover target.
57+
//check if el exists
58+
if(e.target == null)
59+
return;
60+
61+
if(e.target.localName !== 'td'){
62+
angular.element(e.target).addClass('lvl-over');
63+
}else{
64+
angular.element(e.target.parentElement).addClass('lvl-over');
65+
}
66+
67+
});
68+
69+
el.bind("dragleave", function (e) {
70+
//check if el exists
71+
if(e.target == null)
72+
return;
73+
74+
if(e.target.localName !== 'td'){
75+
angular.element(e.target).removeClass('lvl-over'); // this / e.target is previous target element.
76+
}else{
77+
angular.element(e.target.parentElement).removeClass('lvl-over'); // this / e.target is previous target element.
78+
}
79+
80+
});
81+
82+
el.bind("drop", function (e) {
83+
if (e.preventDefault) {
84+
e.preventDefault(); // Necessary. Allows us to drop.
85+
}
86+
87+
if (e.stopPropagation) {
88+
e.stopPropagation(); // Necessary. Allows us to drop.
89+
}
90+
var data = e.originalEvent.dataTransfer.getData("text");
91+
var dest = document.getElementById(id);
92+
var src = document.getElementById(data);
93+
94+
scope.onDrop({dragEl: data, dropEl: id});
95+
});
96+
97+
$rootScope.$on("LVL-DRAG-START", function () {
98+
var el = document.getElementById(id);
99+
angular.element(el).addClass("lvl-target");
100+
});
101+
102+
$rootScope.$on("LVL-DRAG-END", function () {
103+
var el = document.getElementById(id);
104+
angular.element(el).removeClass("lvl-target");
105+
106+
//check if el exists
107+
if(el == null)
108+
return;
109+
110+
if(el.localName !== 'td'){
111+
angular.element(el).removeClass('lvl-over'); // this / e.target is previous target element.
112+
}else{
113+
angular.element(el.parentElement).removeClass('lvl-over'); // this / e.target is previous target element.
114+
}
115+
//angular.element(el).removeClass("lvl-over");
116+
});
117+
}
118+
119+
}
120+
};
121+
}]);
122+
123+
module.directive('lvlDropZone', ['$rootScope', 'uuid', function ($rootScope, uuid) {
124+
return {
125+
restrict: 'A',
126+
scope: {
127+
onDrop: '&'
128+
},
129+
link: function (scope, el, attrs, controller) {
130+
var id = angular.element(el).attr("id");
131+
if (!id) {
132+
id = uuid.new();
133+
angular.element(el).attr("id", id);
134+
}
135+
136+
var isEnabled = scope.$eval(attrs.lvlDropZone);
137+
if(isEnabled){
138+
el.bind("dragover", function (e) {
139+
if (e.preventDefault) {
140+
e.preventDefault(); // Necessary. Allows us to drop.
141+
}
142+
143+
e.originalEvent.dataTransfer.dropEffect = 'move'; // See the section on the originalEvent.dataTransfer object.
144+
return false;
145+
});
146+
147+
el.bind("dragenter", function (e) {
148+
// this / e.target is the current hover target.
149+
//check if el exists
150+
if(e.target == null)
151+
return;
152+
153+
//check if we really drag files from desktop
154+
if(e.originalEvent.dataTransfer.types[0] != 'Files')
155+
return;
156+
//remove style
157+
angular.element(e.target).addClass('lvl-zone-over');
158+
159+
});
160+
161+
el.bind("dragleave", function (e) {
162+
//check if el exists
163+
if(e.target == null)
164+
return;
165+
166+
angular.element(e.target).removeClass('lvl-zone-over'); // this / e.target is previous target element.
167+
});
168+
169+
el.bind("drop", function (e) {
170+
console.log('files dropped');
171+
172+
angular.element(e.target).removeClass('lvl-zone-over');
173+
174+
if (e.preventDefault) {
175+
e.preventDefault(); // Necessary. Allows us to drop.
176+
}
177+
178+
if (e.stopPropagation) {
179+
e.stopPropagation(); // Necessary. Allows us to drop.
180+
}
181+
182+
//check if we really drag files from desktop
183+
if(e.originalEvent.dataTransfer.types[0] != 'Files')
184+
return;
185+
186+
var files = e.originalEvent.dataTransfer.files;
187+
188+
var data = e.originalEvent.dataTransfer.getData("text");
189+
190+
scope.onDrop({dragEl: data, dropEl: id, dragFiles: files});
191+
});
192+
193+
$rootScope.$on("LVL-DRAG-START", function () {
194+
var el = document.getElementById(id);
195+
angular.element(el).addClass("lvl-target");
196+
});
197+
198+
$rootScope.$on("LVL-DRAG-END", function () {
199+
var el = document.getElementById(id);
200+
angular.element(el).removeClass("lvl-target");
201+
202+
//check if el exists
203+
if(el == null)
204+
return;
205+
angular.element(el).removeClass("lvl-zone-over");
206+
});
207+
}
208+
209+
}
210+
};
211+
}]);

‎src/js/directives/and-uuid.js‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
var module;
2+
3+
try {
4+
module = angular.module('lvl.services');
5+
} catch (e) {
6+
module = angular.module('lvl.services', []);
7+
}
8+
9+
module.factory('uuid', function() {
10+
var svc = {
11+
new: function() {
12+
function _p8(s) {
13+
var p = (Math.random().toString(16)+"000000000").substr(2,8);
14+
return s ? "-" + p.substr(0,4) + "-" + p.substr(4,4) : p ;
15+
}
16+
return _p8() + _p8(true) + _p8(true) + _p8();
17+
},
18+
19+
empty: function() {
20+
return '00000000-0000-0000-0000-000000000000';
21+
}
22+
};
23+
24+
return svc;
25+
});

0 commit comments

Comments
 (0)