JSFiddle - React, Tailwind, and code Playground

by incutonez

HTML

<body>
    <div id="topContainer"> <span>Parent Directory 1</span>

    </div> <span id="topFolder" class="folder">
        <div class="drop">
        </div>
    </span>

    <hr />
    <div id="container" class="container">
        <div class="dropzone"> <span>Parent Directory 2</span>

        </div>
        <div id="cont1" class="container">
            <div class="dropzone"> <span>Folder 1</span>

            </div> <span id="folder1" class="folder">
                <div class="drop">
                    <div class="drag">&nbsp;</div>
                    <div class="drag">&nbsp;</div>
                    <div class="drag">&nbsp;</div>
                    <div class="drag">&nbsp;</div>
                    <div class="drag">&nbsp;</div>
                    <div class="drag">&nbsp;</div>
                    <div class="drag">&nbsp;</div>
                    <div class="drag">&nbsp;</div>
                    <div class="drag">&nbsp;</div>
                    <div class="drag">&nbsp;</div>
                    <div class="drag">&nbsp;</div>
                    <div class="drag">&nbsp;</div>
                </div>
            </span>

        </div>
        <div id="cont2" class="container">
            <div class="dropzone"> <span>Folder 2</span>

            </div> <span id="folder2" class="folder">
                <div class="drop">
                </div>
            </span>

        </div>
        <div id="cont3" class="container">
            <div class="dropzone"> <span>Folder 3</span>

            </div> <span id="folder3" class="folder">
                <div class="drop">
                </div>
            </span>

        </div> <span id="mainFolder" class="folder">
            <div class="drop">
                <div class="drag">&nbsp;</div>
            </div>
        </span>

    </div>
</body>

CSS

.dropzone {
    height: 300px;
    width: 100px;
    border: 1px solid black;
}
.drag {
    clear: both;
    height: 50px;
    width: 80px;
    background-color: black;
    position: relative;
    cursor: pointer;
}
#topContainer, .dropzone {
    height: 50px;
    width: 300px;
    border: 2px solid black;
    text-align: center;
}
.folder .drag {
    margin: 5px;
}
.container {
    border: 2px solid blue;
    margin: 10px;
}
.over {
    background-color: yellow;
}

#container {
    width: 800px;
    height: 600px;
    overflow-y: scroll;
    border-color: red;
    position: relative;
}

JavaScript

$(document).ready(function () {
    var opts = {
        helper: 'clone',
        appendTo: 'body'
        //appendTo: '#container'
    };
    $('div.drag').each(function () {
        $(this).draggable(opts);
    });

    $('.dropzone, #topContainer').droppable({
        drop: function (e, ui) {
            var clone = $(ui.draggable).clone();
            clone.draggable(opts);
            $(this).siblings('.folder').children('.drop').append(clone);
            $(this).removeClass('over');
        },
        over: function (e, ui) {
            $(this).addClass('over');
        },
        out: function (e, ui) {
            $(this).removeClass('over');
        }
    });
});