0

HTML CODE

<html>
    <head>

    </head>
    <title>
        DEMO AJAX
    </title>

    <body>
        <div>
            <button id='ajax-button'>AJAX</button>
            <div class='show-html'></div>
        </div>
        <script src='../js-files/demo-ajax.js' type='module'></script>
    </body>
</html>

AJAX code for opening HTML file.


(function() {

    var httpRequest;
    document.getElementById('ajax-button')
    .addEventListener('click', requestMade);

    function requestMade() {
        httpRequest = new XMLHttpRequest

        if(!httpRequest) {
            alert('request failed : - (');
            return false;
        }

        httpRequest.onreadystatechange = showFile;
        /*I want to open this html file below with the javascript attached to it*/
        httpRequest.open('GET', 'drag-drop.html')
        httpRequest.send()
    }

    function showFile() {
        if(httpRequest.readyState === XMLHttpRequest.DONE) {
            if(httpRequest.status === 200) {
                document.querySelector('.show-html').innerHTML = this.responseText
            } else {
                alert('OH no there was a problem!')
            }
        }
    }

})();


let drag = document.getElementById('drag');
let drop = document.querySelector('.drop-zone')
let dragging = false;
console.log(dragging)
drag.style.display = 'block'

drag.ondragstart = event => {
    event.dataTransfer.setData('text/plain', event.target.id)
}

drag.ondrag = event => {
    let target = event.currentTarget
    dragging = true
    if(dragging === true) {
        target.style.color = 'blue';
        target.style.display = 'none'
    } 
}

document.ondragend = event => {
    dragging = false
    let target = event.currentTarget
    if(dragging === false) {
        drag.style.display = 'block'
    }
}


drop.ondragover = event => {
    event.preventDefault()
}

drop.ondrop = event => {   
        const id = event.dataTransfer.getData('text');
        const dragItem = document.getElementById(id);
        const dropZone = event.target;
        dropZone.appendChild(dragItem);
        event.dataTransfer.clearData()
        dragItem.style.display = 'block'
        dragItem.style.display = 'red'
}
body {
    background: black;
    font-family: "Comic Sans MS"
}

h1 {
    text-align: center;
    color: white;
    font-size: 60px;
    
}

.drag-drop-holder {
    display: flex;
    flex-direction: row;
    width: 60%;
    border: yellow dashed 4px;
    margin: 5% auto;
    height: auto;
}

.drag-item, .drop-zone {
    border: white 2px solid;
    width: 30%;
    height: 100px;
    margin: 18% auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.drag-item {
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px;
    cursor: grab;
}

.drop-zone {
   
}

@media screen and (max-width: 992px) {
    
    .drag-item, .drop-zone {
        border: white 2px solid;
        width: 30%;
        height: 100px;
        font-size: 100%;
        margin: 18% auto;
    }
}
<!DOCTYPE html>
<html>
    <title>
        Drag and Drop
    </title>
    <head>
        <link rel='stylesheet' type='text/css' href='../styles/drag-drop.css'>
    </head>

    <body>
        
        <h1>Drag and Drop</h1>

        <div class='drag-drop-holder'>

            <div class='drag-item'>
                <span id='drag' draggable='true'>
                    DRAG ITEM
                </span>
            </div>

            <div class='drop-zone'>
                
            </div>

        </div>

        <script src='../js-files/drag-drop.js' type='module'></script>
    </body>
    
</html>

I want to load the drag and drop html file with the drag and drop interactivity still working, but it only comes up with the CSS attached. Can anyone provide any suggestions on how to accomplish this? If you show this code in your own editor it you will have to tweak the sources for the css and the js in order to see what I mean.

Thanks!

C-Lew-On-Truth
  • 1
  • 2

0 Answers0