delete drag and drop functions
This commit is contained in:
parent
2f1bf9fe18
commit
b713ebde98
8 changed files with 38 additions and 105 deletions
|
|
@ -238,17 +238,26 @@ input[type="file"] {
|
|||
|
||||
#drop-area {
|
||||
position: fixed;
|
||||
width: 90%;
|
||||
height: 90%;
|
||||
left: 5%;
|
||||
top: 5%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 9999;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
#drop-area-inside {
|
||||
background-color: rgba(38, 189, 38, 0.5);
|
||||
border: 0.3rem dashed rgba(38, 189, 38, 0.85);
|
||||
border-radius: 1rem;
|
||||
z-index: 9999;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 9000;
|
||||
}
|
||||
|
||||
#drop-area.highlight {
|
||||
#drop-area #drop-area-inside.highlight {
|
||||
border-color: rgb(61, 228, 61);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -149,7 +149,9 @@
|
|||
|
||||
</div> <!-- end content -->
|
||||
|
||||
<div id="drop-area"></div>
|
||||
<div id="drop-area">
|
||||
<div id="drop-area-inside" class="hidden"></div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1082,51 +1082,6 @@ document.getElementById("save-location-input").addEventListener("mouseout", () =
|
|||
document.getElementById("checkbox-hints").addEventListener("click", CheckboxHintsToggle, false);
|
||||
document.getElementById("checkbox-spoilers").addEventListener("click", CheckboxSpoilersToggle, false);
|
||||
|
||||
/* Drag and drop functions */
|
||||
|
||||
let dropArea = document.getElementById("drop-area");
|
||||
|
||||
/* Prevent default browser functions from firing */
|
||||
["dragenter", "dragover", "dragleave", "drop"].forEach(eventName => {
|
||||
dropArea.addEventListener(eventName, preventDefaults, false);
|
||||
});
|
||||
|
||||
function preventDefaults(e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
}
|
||||
|
||||
/* Make the user know that they hover over the right drag and drop area */
|
||||
["dragenter", "dragover"].forEach(eventName => {
|
||||
dropArea.addEventListener(eventName, highlight, false);
|
||||
});
|
||||
|
||||
["dragleave", "drop"].forEach(eventName => {
|
||||
dropArea.addEventListener(eventName, unhighlight, false);
|
||||
});
|
||||
|
||||
function highlight(e) {
|
||||
dropArea.classList.add("highlight");
|
||||
}
|
||||
|
||||
function unhighlight(e) {
|
||||
dropArea.classList.remove("highlight");
|
||||
}
|
||||
|
||||
/* What to do with the file(s) */
|
||||
dropArea.addEventListener("drop", handleDrop, false);
|
||||
|
||||
function handleDrop(e) {
|
||||
let dt = e.dataTransfer;
|
||||
let files = dt.files;
|
||||
|
||||
console.log(e);
|
||||
console.log(dt);
|
||||
console.log(files);
|
||||
|
||||
LoadSaveFile(dt, new Date());
|
||||
}
|
||||
|
||||
/* ------------------------- Exports ------------------------------- */
|
||||
|
||||
export {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue