JS - Draggable JS

Question

Witam robie "pseudo system operacyjny" coś jak os-js i obecnie jak klikne sobie w jakiś plik na "pulpicie"

to odpala mi sie podgląd jego kodu

i chciałbym zrobić że można tą "aplikacje" od podglądania kodu przesuwać, tak jak jest to z appkami np. na linuxie czy windowsie

 

jak moge to zrobić?

tu kod js który pozyskuje apki z node-js

const req = new XMLHttpRequest();
let files = []

function OpenApp(elName) {
    document.querySelector(`#app${elName}`).classList.add("active")
}

function CloseApp(elName) {
    document.querySelector(`#app${elName}`).classList.remove("active")
}

req.open("GET", "allfiles/", true); 
req.onreadystatechange = function(){
    document.querySelector("#v8-git-desktop").innerHTML = ""
    obj = JSON.parse(req.responseText);
    obj.forEach(file => {
        let exticon = ""
        let name = file.name.substr(0, 10) 

        if(file.ext == "html" || file.ext == "html") {
            exticon = "resources-img/html.png"
        }
        else if(file.ext == "css") {
            exticon = "resources-img/css.png"
        }
        else if(file.ext == "js") {
            exticon = "resources-img/js.png"
        }
        else if(file.ext == "sql") {
            exticon = "resources-img/sql.png"
        }
        else if(file.ext == "php") {
            exticon = "resources-img/php.png"
        }
        else if(file.ext == "json") {
            exticon = "resources-img/node.png"
        }
        else if(file.ext == "txt") {
            exticon = "resources-img/txt.png"
        }
        else if(file.ext == "jpg" || file.ext == "jpeg" || file.ext == "png") {
            exticon = file.name
        }
        let filenamewithoutext = name.replace('.', '')
        document.querySelector("#v8-git-desktop").innerHTML += `
        <div class="app-init" id="ae${filenamewithoutext}" onclick="OpenApp('${filenamewithoutext}')">
            <img src="${exticon}" alt class="app-icon">
            <span class="app-title">${name}</span>
            
        </div> 
        <div class="app-root previeweditor" id="app${filenamewithoutext}" style="resize: both;">
            <button class="app-close" id="appc${filenamewithoutext}" onclick="CloseApp('${filenamewithoutext}')">x</button>
            <!--<button class="app-drag" >x</button>-->
            <span id="drag_app${filenamewithoutext}">PreviewEditor - ${name} </span><br><br>
            <textarea>${file.code}</textarea>
        </div>     
        `;  
    })
};
req.send(null); 

 

Comments

Linia 20, przy okazji, masz:

if (file.ext == "html" || file.ext == "html")

czy aby nie chodziło Tobie o  

if (file.ext == "html" || file.ext == "htm")

 

Answer 1

Masz sporo przykładów do zaadoptowania.

Answer 2

Resizable and draggable div using JavaScript (Vanilla) - Part 1

Resizable and draggable div using JavaScript (Vanilla) - Part 2