* CSS Klassen umbenannt

* Debug Code entfernt
This commit is contained in:
root 2023-03-24 08:34:29 +01:00
parent e7fb076f12
commit 24c9f12695
3 changed files with 17 additions and 18 deletions

View File

@ -17,7 +17,7 @@
</head> </head>
<body> <body>
<div id="wrapper"> <div id="wrapper">
<div id="dropzone" class="nodrop"> <div id="dropzone" class="inactive">
<p><?php echo $text; ?></p> <p><?php echo $text; ?></p>
</div> </div>
</div> </div>

View File

@ -2,25 +2,23 @@ dropzone = document.getElementById('dropzone');
dropzone.addEventListener('dragover', function(e) { dropzone.addEventListener('dragover', function(e) {
e.preventDefault(); e.preventDefault();
this.classList.remove('nodrop'); this.classList.remove('inactive');
this.classList.add('drop'); this.classList.add('active');
}); });
dropzone.addEventListener('dragleave', function(e) { dropzone.addEventListener('dragleave', function(e) {
this.classList.remove('drop'); this.classList.remove('active');
this.classList.add('nodrop'); this.classList.add('inactive');
}); });
dropzone.addEventListener('mousedown', function(e) { dropzone.addEventListener('mousedown', function(e) {
this.classList.remove('nodrop'); this.classList.remove('inactive');
this.classList.add('drop'); this.classList.add('active');
console.log('click');
}); });
dropzone.addEventListener('mouseup', function(e) { dropzone.addEventListener('mouseup', function(e) {
this.classList.remove('drop'); this.classList.remove('active');
this.classList.add('nodrop'); this.classList.add('inactive');
console.log('unclick');
}); });
dropzone.addEventListener('click', function(e) { dropzone.addEventListener('click', function(e) {
@ -39,8 +37,8 @@ dropzone.addEventListener('click', function(e) {
dropzone.addEventListener('drop', function(e) { dropzone.addEventListener('drop', function(e) {
e.preventDefault(); e.preventDefault();
this.classList.remove('drop'); this.classList.remove('active');
this.classList.add('nodrop'); this.classList.add('inactive');
file = e.dataTransfer.files[0]; file = e.dataTransfer.files[0];
if( file.type == 'image/png' || file.type == 'image/jpeg' ) { if( file.type == 'image/png' || file.type == 'image/jpeg' ) {

View File

@ -36,12 +36,13 @@ body {
justify-content: center; justify-content: center;
} }
.nodrop { .active {
background-color: #ffb703;
outline: 2px dashed #fb8500;
}
.inactive {
background-color: #f5f5f5; background-color: #f5f5f5;
outline: 2px dashed #d5d5d5; outline: 2px dashed #d5d5d5;
} }
.drop {
background-color: #ffb703;
outline: 2px dashed #fb8500;
}