-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathdnds.html
113 lines (97 loc) · 2.91 KB
/
dnds.html
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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<head><title>Drag n Drop editor - by @qab</title></head>
<body>
<style>
#qimg{width:100px;height:100px;border:1px solid red;}
#qform{width:600px;}
#qfile{font-size:60px;border:1.5px solid black;width:50px;height:50px;line-height:53px;}
#qnew{font-size:55px;border:1.5px solid black;width:50px;height:50px;line-height:45px;cursor: default;}
textarea{margin: 0px; width: 232px; height: 85px;}
</style>
<div draggable="true" ondragover="event.preventDefault()" id="qfile">◎</div>
<form id="qform">
<fieldset id="qfs">
<legend>Data types & values</legend>
<br>
<p>Drag and drop something in the bullseye above first.<br> Then you may edit values and create your own dragged object by dragging the Q below.
<br><br>
For example, drag any of the following elements and drop it into the bullseye:<br><br>
<img src='https://www.facebook.com/favicon.ico'/><br>
<a href=''>Anchor tag</a>
<br>
<b>Some text</b>
<br><br>
You may also drop files from your desktop (or other applications), keep in mind you can't create your own edited 'file' object.
</p>
</fieldset>
</form>
<div id="qnew" draggable="true">
Q
</div>
<br>
<script>
qnew.ondragstart=function(e){
e.dataTransfer.clearData();
for(f=1;f<=window.i;f++){
console.log(f);
try{
e.dataTransfer.setData(window['qq'+f].value,window['q'+f].value);
}catch(e){
console.dir(e)
}
}
}
var dropbox;
var i=0;
function drop(e) {
window.q(e);
i=0;
console.dir(e.dataTransfer);
qfs.innerHTML='<legend>Data types & values</legend>';
for(z in e.dataTransfer.types){
if(z.length<=2){
if(e.dataTransfer.types[z]!='Files'){
try{
i++;
var elem=document.createElement('input');
elem.type='input';
elem.value=e.dataTransfer.types[z];
elem.id='qq'+i;
var elem2=document.createElement('textarea');
elem2.id='q'+i;
elem2.value=e.dataTransfer.getData(e.dataTransfer.types[z]);
var x=document.createElement('input');
x.type='button';
x.value='X';
x.qdata=i+'';
x.onclick=function(e){window['q'+e.target.qdata].remove();window['qq'+e.target.qdata].remove();e.target.remove();};
qfs.appendChild(elem);
qfs.appendChild(elem2);
qfs.appendChild(x);
qfs.appendChild(document.createElement('br'));
}catch(ee){console.dir(ee)}
}else{
console.dir(red=e.dataTransfer.files[0]);
if(e.dataTransfer.files.length>0){
read = new FileReader();
read.readAsBinaryString(red);
qfs.innerHTML='<b>'+red.name+'</b> size:'+red.size+'<br>';
read.onloadend = function(){
var afile=document.createElement('textarea');
afile.value=read.result;
qfs.appendChild(afile);
}
}
}
}
}
}
function q(e) {
e.stopPropagation();
e.preventDefault();
}
dropbox = document.getElementById("qfile");
dropbox.addEventListener("dragenter", q, false);
dropbox.addEventListener("dragover", q, false);
dropbox.addEventListener("drop", drop, false);
</script>
</body>