1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
| (function () {
var div = ' <div style=" width:200px ; height:200px; backgroun: #222;" > elContent </div>';
var img = ' <img src="#" /> ';
var dropZone = $('#drop-area');
var body = document.body,
dropArea = document.getElementById('drop-area'),
droppableArr = [
],
dropAreaTimeout;
// initialize droppables
[
].slice.call(document.querySelectorAll('#drop-area')).forEach(function (el) {
droppableArr.push(new Droppable(el, {
onDrop: function (instance, draggableEl) {
// show checkmark inside the droppabe element
classie.add(instance.el, 'drop-feedback');
clearTimeout(instance.checkmarkTimeout);
instance.checkmarkTimeout = setTimeout(function () {
classie.remove(instance.el, 'drop-feedback');
}, 800);
// ...
}
}));
});
// initialize draggable(s)
[
].slice.call(document.querySelectorAll('#grid .grid__item')).forEach(function (el) {
new Draggable(el, droppableArr, {
scroll: true,
scrollable: '#drop-area',
scrollSpeed: 40,
scrollSensitivity: 50,
draggabilly: {
containment: '#drop-area'
},
onStart: function () {
// add class 'drag-active' to body
classie.add(body, 'drag-active');
// clear timeout: dropAreaTimeout (toggle drop area)
clearTimeout(dropAreaTimeout);
// show dropArea
// classie.add( dropArea, 'show' );
},
onEnd: function (wasDropped) {
var afterDropFn = function () {
// hide dropArea
// classie.remove( dropArea, 'show' );
// remove class 'drag-active' from body
classie.remove(body, 'drag-active');
};
if (!wasDropped) {
afterDropFn();
}
else {
// after some time hide drop area and remove class 'drag-active' from body
clearTimeout(dropAreaTimeout);
dropAreaTimeout = setTimeout(afterDropFn, 400);
console.log('ok');
elContent = el.id;
if (elContent === 'div') {
var myWindow = window.open('', '', 'width=600,height=450');
;
newContent = myWindow.document.createElement('textarea');
myWindow.document.body.appendChild(newContent);
dropZone.append(div);
}
else if (elContent === 'img') {
var myWindow = window.open('', '', 'width=600,height=450');
;
newContent = myWindow.document.createElement('textarea');
myWindow.document.body.appendChild(newContent);
dropZone.append(div);
dropZone.append(img);
}
}
}
});
});
}) (); |
