Why the draggable function is not working on computer while its working in phone?

Question

I am working on a collage maker but the emoji is not draggable, what's the problem?? its working on phone but its not working in computer.As I am a beginner I dont know much about drag and drop functions maybe I can Know what can improve this and the css position for image is not responsive..Hope to get it answered soon.

function ch() {
  const input = document.getElementById("he").value;
  const img = document.getElementById("img1");
  img.setAttribute("src", input);
  if (input == "")
    img.setAttribute("src", "https://bitsofco.de/content/images/2018/12/broken-1.png");
}

function changeImg2() {
  const input = document.getElementById("he").value;
  const img = document.getElementById("img2");
  img.setAttribute("src", input);
  if (input == "")
    img.setAttribute("src", "https://bitsofco.de/content/images/2018/12/broken-1.png");
}

alert("Collage Maker by Ambica and Me");

function addEmoji(emoji) {

  const size = prompt("You can change size\nenter size in rem\nclick again to change size\nleave blank for default\ne.g- 2rem");
  const p = document.getElementById("p");
  p.innerHTML = emoji;
  p.style.fontSize = size;
  if (size == "1rem") {
    confirm("size cant be less than 2rem\n we are setting the dedault size for the sticker\n if you dont agree click cancel and change the size by clicking the sticker again ");
    p.style.fontSize = "2rem";
  }
}



alert("touch_hold and move boxes around!")

window.onload = function() {

  function initEvent() {
    // get target DOM elements
    let boxes = document.querySelectorAll("#p");

    // loop through array list of draggable DOM elements
    for (let i = 0; i < boxes.length; i++) {
      let box = boxes[i];
      box.addEventListener("touchmove", function(event) {
        // align touch event touches with target DOM element
        let touch = event.targetTouches[0];

        event.target.style.left = touch.pageX - 10 + "px";
        event.target.style.top = touch.pageY - 10 + "px";

        event.preventDefault();
      }, false);
    }
  }

  // start initialization
  initEvent();
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  overflow-x: hidden;
  list-style: none;
  text-decoration: none;
  font-family: 'Lobster';
  outline: none;
  background-color: #101820;
}

center {
  position: absolute;
  transform: translate(-50%, -50%);
  top: 80%;
  left: 50%;
  border: solid 5px #52C0C7;
  padding: 25px 20px 25px 20px;
  border-radius: 5px;
  background-color: rgba(255, 255, 255, 0.06) box-shadow:-3px -3px 7px rgba(255, 255, 255, 0.05), 3px 3px 5px rgba(0, 0, 0, 0.5);
}

div.scrollmenu {
  overflow: auto;
  white-space: nowrap;
}

div.scrollmenu a {
  position: absolute;
  transform: translate(-50%, -50%);
  top: 5%;
  border: solid 5px #52c0c7;
  border-radius: 15px;
  box-shadow: 2px 2px 5px grey, -2px -2px 5px lightgrey;
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px;
  text-decoration: none;
}

div.scrollmenu button:hover {
  cursor: pointer;
}

input {
  border: 2px solid #52c0c7;
  border-radius: 10px;
  width: 80vw;
  height: 30px;
  text-align: center;
  margin-top: 20px;
  box-shadow: 2px 2px 5px lightgrey;
  padding: 5px;
}

img {
  width: 25vh;
  height: 25vh;
  border: solid 10px #52c0c7;
  box-shadow: 2px 2px 5px lightgrey;
  transform: translate(-50%, -50%);
  transition-duration: 0.5s;
  background: #ee4c62;
}

#img1 {
  position: absolute;
  top: 25vh;
  left: 40vw;
}

#img2 {
  position: absolute;
  top: 40vh;
  left: 60vw;
}

 ::placeholder,
input {
  font-size: 20px;
  color: #52c0c7;
  text-align: center;
}

button {
  outline: none;
  font-weight: bold;
  color: white;
  margin-top: 5px;
  border-radius: 5px;
  width: 200px;
  height: 35px;
  font-size: 20px;
  border: 4px solid #52C0C7;
  background: #52c0c7;
}

img:hover {
  height: 30vh;
  width: 30vh;
  z-index: 10;
}

#drag {
  z-index: 9;
}

p {
  position: absolute;
  transform: translate(-50%, -50%);
  top: 25%;
  left: 40%;
  background: none;
  font-size: 2rem;
  transform: rotate(10deg);
}

<div class="scrollmenu">
  <button onclick="addEmoji('♥️')">
             ♥️
         </button>

  <button onclick="addEmoji('')">
             
         </button>
  <button onclick="addEmoji('')">
             
         </button>
  <button onclick="addEmoji('☺')">
            ☺
         </button>
  <button onclick="addEmoji('')">
             
         </button>

</div>
<img id="img1" src="https://api.sololearn.com/Uploads/Avatars/19394415.jpg" alt="The Url you entered did'nt seem be any image Or The Image Did'nt Load">
<img id="img2" src="https://api.sololearn.com/Uploads/Avatars/20278522.jpg" alt="The Url you entered did'nt seem be any image Or The Image Did'nt Load">
<center>
  <input type="text" id="he" placeholder="Enter Url">
  <button onclick="ch()">Get Image (Pic1)</button>
  <button onclick="changeImg2()">Get Image (Pic2)</button>
</center>
<p id="p"></p>