'Drag and Drop - Works on PC but not mobile. Trying to modify mobile code unsuccessfully

touchpunch.furf page no longer exists... So I am working in the dark.

I have Javascript working perfectly on the PC. I am trying to modify the mobile code to swap my touch functions for the existing drag functions but I don't know how to line up the javascript to match my code, so I am stuck. I AM NOT A GOOD PROGRAMMER. Please be kind. Trying for a while to figure this out. I am even having a hard time formatting this post :)

I need help on the /// Start Mobile Workaround /// section

People claim this is answered but the furf is gone. So I can't find a solution.

    
    /////// Start Mobile workaround ////////
    function touchHandler(event) {
    var touch = event.changedTouches[0];

    var simulatedEvent = document.createEvent("MouseEvent");
        simulatedEvent.initMouseEvent({
        touchstart: "dragstart",
        touchmove: "drag",
        touchend: "dragend"
    }[event.type], true, true, window, 1,
        touch.screenX, touch.screenY,
        touch.clientX, touch.clientY, false,
        false, false, false, 0, null);

    touch.target.dispatchEvent(simulatedEvent);
    event.preventDefault();
    }

    function init() {
    document.getElementsByClassName('todo').addEventListener("touchstart", touchHandler, true);
    document.getElementsByClassName('todo').addEventListener("touchmove", touchHandler, true);
    document.getElementsByClassName('todo').addEventListener("touchend", touchHandler, true);
    document.getElementsByClassName('todo').addEventListener("touchcancel", touchHandler, true);
    }

//    $( document ).ready( init );

    /////// Start of Draggable scripts //////////
    const todos = document.querySelectorAll(".todo");
    const all_status = document.querySelectorAll(".status");
    let draggableTodo = null;

    todos.forEach((todo) => {
  todo.addEventListener("dragstart", dragStart);
  todo.addEventListener("dragend", dragEnd);
    });
    
    function dragStart() {
  draggableTodo = this;
  setTimeout(() => {
    this.style.display = "none";                
  }, 0);
  this.style.border = "2px dashed #cc00cc";
  console.log("dragStart");
    }
    
    function dragEnd() {
  draggableTodo = null;
  setTimeout(() => {
    this.style.display = "block";               
  }, 0);
   this.style.border = "1px solid #666666";
  console.log("dragEnd");
    }
    
    all_status.forEach((status) => {
  status.addEventListener("dragover", dragOver);
  status.addEventListener("dragenter", dragEnter);
  status.addEventListener("dragleave", dragLeave);
  status.addEventListener("drop", dragDrop);
    });

    function dragOver(e) {
  e.preventDefault();
  //   console.log("dragOver");
    }

    function dragEnter() {
  this.style.border = "1px dashed #cc00cc";
  console.log("dragEnter");
    }

    function dragLeave(){
  this.style.border = "1px solid #CCCCCC";
  console.log("dragLeave");
    }

    function dragDrop(){
  this.style.border = "1px solid #CCCCCC";  
  this.appendChild(draggableTodo);
  console.log("dropping");
    }
    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/styles.css">
    <style>
/* styles for task panel */
    .row:after {
  content: "";
  display: flex;
  clear: both;
    }
    .col-25 {
  float: left;
  width: 25%;
  margin-top: 0px;
  height:auto;
  text-align:center;
  border-color:#CCCCCC;  
  border-style:solid; 
  border-width: 1px;
      padding: 0px;
    }
    .status {
   /* border: 0px solid #cbd2d9;
   border-radius: 0rem; */
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    overflow-y: auto; 
    max-height: 50em;
    position:relative;
    padding:0px;

    }
    .status:nth-child(even) {
background:  #FCFCFC;

    } 
    .todo-container {
  width: auto;
  display: flex; 
  text-align:center; 
  max-height:255px; 
  min-height:255px;
    }

    .todo {
background-color: #E6E6E6;
/* background-color: #FFB7B7; */
  width: 10em;
  height: 12em;
  padding: 0px;
  border-radius: 5px;
  border: 1px solid #666666;
  overflow-y: auto;
  font-size:10px;
  font:bold;
  margin: 3px 3px 3px 3px;
  overflow: hidden;
  position:relative;
   }
</style>
</head>
<body>

    <div >

     <div class="col-100"  style="text-align:center; " >
        <label for="task_panel" >Tasks</label>
     </div>

     <div class="row">
          <div class="col-25" style="text-align:center;">
            <label for="todo" > To Do </label>
          </div>
          <div class="col-25" style="text-align:center;">
            <label for="doing"> Doing </label>
          </div>
          <div class="col-25" style="text-align:center;">
            <label for="verified"> Verified </label>
          </div>
          <div class="col-25" style="text-align:center;">
            <label for="done"> Done </label>
          </div>
    </div>

    <div class="todo-container">
        <div class="status col-25"  id="to_do"  style="text-align:center; max-height:255px; min-height:255px;">
            <div class="todo" draggable="true" >
            <div  align="center" style="background: #666666; color:#FFFFFF; font-weight:bold;"><tr><td># Title</td></tr></div>
            
            </div>
        </div>
        <div class="status col-25"  id="doing"  style="text-align:center; max-height:255px; min-height:255px;">
            
        </div>
        <div class="status col-25"  id="verified"   style="text-align:center; max-height:255px; min-height:255px;">
            <div class="todo" draggable="true" >
            <div  align="center" style="background: #666666; color:#FFFFFF; font-weight:bold;"><tr><td># Title</td></tr></div></div>
        </div>
        <div class="status col-25"  id="done"   style="text-align:center; max-height:255px; min-height:255px;">
            
        </div>
    </div>

 </div>
javascripthtmljquerycss


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions