JSFiddle - React, Tailwind, and code Playground

by Ritesh Pandey

HTML

<input type="button" id="addList" value="Add List" />
<div class="list-wrap">
<div id="listOne">
    <span>List One</span>
    <ul class="droppable">
        <li class="draggable">One-1</li>
        <li class="draggable">Two-1</li>
        <li class="draggable">Three-1</li>
    </ul>
</div>
<div id="listTwo">
    <span>List Two</span>
    <ul>
        <li>One-2</li>
        <li>Two-2</li>
        <li>Three-2</li>
    </ul>
</div>
</div>
<script type="text/unknown" id="newListTpl">
    <div>
        <ul></ul>
    </div>
</script>

CSS

#listOne, #listTwo{
    display: inline-block;
}
#listOne{
    background-color: pink;
}

#listTwo{
    background-color: yellow;
}

JavaScript

//document.addEventListener("click", addNewList);
document.addEventListener("mousedown", pickDom);
document.addEventListener("mouseup", dropDom);

function addNewList(e) {
    if (e.target.id == "addList") {
        var dListTpl = document.getElementById("newListTpl"),
            listTpl = dListTpl.innerHTML;
        console.log(listTpl);
    }
    e.stopPropagation();
}

function pickDom(e){
//    console.log("mousedown", this, arguments);
//    console.log("target", e.target);
    if( e.target.classList.contains("draggable") ) {
        document.addEventListener("mousemove", startDrag);
    }
}

function startDrag(e){
 //   console.log("mousemove", this, arguments);
    if( e.target.classList.contains("draggable") ) {
        e.target.style.position = "absolute";
        e.target.style.top = e.pageY + "px";
        e.target.style.left = e.pageZ + "px";
    }
}

function dropDom(e) {
//    console.log("mouseup", arguments);
    document.removeEventListener("mousemove", startDrag);
}