How to make Google Interaction

let arr = [0,1,2,3,4,5];
let clickIndex;
let isClicked = false;

function dragenter (index,ev) {
  if(isClicked) {
   
   let imsi = arr[index];
   let gizon = arr[clickIndex];
   arr.splice(clickIndex,1, imsi);
   arr.splice(index,1,gizon);    
  }
    
}
function mouseClick (index,ev) {
  clickIndex = index;
  isClicked = true;
  
  if (isClicked) {
    if (!ev.target.classList.contains("picked")){
      ev.target.classList.add("picked");
    }
  }
}
function mouseMove (ev) {
  if (isClicked) {
    let pick = document.querySelector(".picked");
    if(pick){
        pick.style.top= `${ev.clientY}px`;
        pick.style.left=`${ev.clientX}px`;
    }
  }
}

var vm = new Vue({
  el: '#example',
  data: {
    arr:arr,
    picked: false,
  },
  methods:{
    dragenter:dragenter,
    mouseClick:mouseClick,
    mouseMove:mouseMove,
  }
})

document.addEventListener("mouseup", (ev)=>{
  
  isClicked = false;
 
  let pick = document.querySelector(".picked");
  if(pick){
    pick.classList.remove("picked");
    pick.style="";
  }
  
});
document.addEventListener("mousemove", mouseMove);

.list-move {
  transition: transform 1s;
}

.itemBox {
  margin: 5px;
  border: 20px;
  height: 100px;
  width: 50px;
  background-color: hsla(120, 100%, 50%, 0.3);
  /* pointer-events: none; */
}
.picked { 
  position: fixed;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<body>
  <div id="example">
    <transition-group name="list" tag="div">
      <div v-bind:class="{itemBox: true }" v-bind:key="item" v-for="(item,index) in arr" draggable=false v-on:mouseenter="dragenter(index,$event)"
          v-on:mousedown="mouseClick(index,$event)" >
        {{item}}
      </div>
    </transition-group>
</div>
</body>
</html>

enter image description here

I want to implement the interaction of the Google main page. However, it cannot be solved. How do I get it to work in my code or what do I search for? I am a newbie.

Below is the code I implemented.

https://jsbin.com/yuxojifuxe/edit?html,css,js,output

Answer

If you want drag-and-drop functionality, the best idea in your case would be to seek an already made solution like: https://github.com/SortableJS/Vue.Draggable

Advertisement

Answer