How to make dragable div also in mobile view

Question

I can move it with mouse pointer, but its not moving on touch screen devices. And How to make these icon responsive size so that it will show smaller on mobile device. I used % to make responsive, but its not working. I tried many times. But I failed. So that why I need help from you. Please help me to fix my problem.

//Make the DIV element draggagle:
dragElement(document.getElementById("move"));

function dragElement(elmnt) {
  var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
  if (document.getElementById(elmnt.id + "header")) {
    /* if present, the header is where you move the DIV from:*/
    document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;
  } else {
    /* otherwise, move the DIV from anywhere inside the DIV:*/
    elmnt.onmousedown = dragMouseDown;
  }

  function dragMouseDown(e) {
    e = e || window.event;
    e.preventDefault();
    // get the mouse cursor position at startup:
    pos3 = e.clientX;
    pos4 = e.clientY;
    document.onmouseup = closeDragElement;
    // call a function whenever the cursor moves:
    document.onmousemove = elementDrag;
  }

  function elementDrag(e) {
    e = e || window.event;
    e.preventDefault();
    // calculate the new cursor position:
    pos1 = pos3 - e.clientX;
    pos2 = pos4 - e.clientY;
    pos3 = e.clientX;
    pos4 = e.clientY;
    // set the element's new position:
    elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
    elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
  }

  function closeDragElement() {
    /* stop moving when mouse button is released:*/
    document.onmouseup = null;
    document.onmousemove = null;
  }
}

#move{
  position: absolute;
}
.color-changer {
    z-index: 998;
}

.color-changer:before {
    position: absolute;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f013";
    width: 44px;
    height: 44px;
    z-index: 999;
    font-size: 27px;
    cursor: pointer;
    top: 115px;
    left: 120px;
    line-height: 43px;
    text-align: center;
    background-color: #fff;
    border-radius: 50%;
    color: black;
    transition: all 1s;
    display: block;
    border: 3px solid red;
    animation: spin 2s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.color-changer:hover:before {
    transform: rotate(-360deg);
}

.color-changer li {
    position: absolute;
    list-style: none;
    top: 120px;
    left: 110px;
    transition: 1s;
}

.color-changer li a {
    display: block;
    width: 30px;
    height: 30px;
    text-decoration: none;
    text-align: center;
    color: #fff;
    border-radius: 50%;
    margin: 0 12px;
    border: 3px solid white;
}

.color-changer li:nth-child(1) a {
    transition: all 0.1s 0.05s ease;
    background: #9ACD32;
}

.color-changer li:nth-child(2) a {
    background: #FA5B0F;
    transition: all 0.1s 0.1s ease;
}

.color-changer li:nth-child(3) a {

    background: #FFB400;
    transition: all 0.1s 0.15s ease;
}

.color-changer li:nth-child(4) a {
    transition: all 0.1s 0.2s ease;
    background: #EE6192;
}

.color-changer li:nth-child(5) a {
    transition: all 0.1s 0.25s ease;
    background: #F72B1C;
}

.color-changer:hover li:nth-child(1) a {
    transform: translatex(50px);
}

.color-changer:hover li:nth-child(2) a {
    transform: rotateZ(80deg) translatex(50px);
}

.color-changer:hover li:nth-child(3) a {
    transform: rotateZ(40deg) translatex(50px);
}

.color-changer:hover li:nth-child(4) a {
    transform: rotateZ(-40deg) translatex(50px);
}

.color-changer:hover li:nth-child(5) a {
    transform: rotateZ(-80deg) translatex(45px);
}

<div id="move">
        <ul class="color-changer">
            <li>
                <a href="#" data-theme="green"></a>
            </li>
            <li>
                <a href="#" data-theme="orange"></a>
            </li>
            <li>
                <a href="#" data-theme="yellow"></a>
            </li>
            <li>
                <a href="#" data-theme="pink"></a>
            </li>
            <li>
                <a href="#" data-theme="red"></a>
            </li>
        </ul>
    </div>