Click on a centered image and drag it to the left link or right link?

Question

This would be the image centered in the middle of the page...right side a link and left another link ...the user would have to click this image and drag to enter the links...

Answer 1

you can monitor the direction to which the circle was moved using the events dragstart and dragend, for this can analyze the properties as x, clientX, screenX.

thus in the dragend, you can take action if it moves left or right.

in the example below try to drag the circle to the left or right.

var circulo = document.getElementById("circulo");
var screenX = 0;
var pos = "centro";

circulo.addEventListener("dragstart", function (event) {
  screenX = event.screenX;
});

circulo.addEventListener("dragend", function (event) {  
  var aux = event.screenX > screenX ? "direita" : "esquerda";
  if (pos != aux) {
    circulo.classList.remove(pos);  
    pos = pos == "centro" ? aux : "centro";
    circulo.classList.add(pos);
  }  
});

circulo.addEventListener("transitionend", function (event) {
  if (event.propertyName == "left") {
    console.log("circulo movido para a " + pos);
  }
});

html, body {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: gainsboro;
  margin: 0px;
  padding: 0px;
  overflow: hidden;
}

#circulo {
  position: absolute;
  width: 200px;
  height: 200px;
  margin: auto;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  transition: all 1s;  
}

#circulo svg {
  -webkit-filter: drop-shadow( 0px 0px 5px black );
  filter: drop-shadow( 0px 0px 5px black );
}

#circulo path {
  fill: darkorange;
  transition: fill 1s; 
}

#circulo.esquerda {
  right: 100%;
  left: -100px;
}

#circulo.direita {
  left: calc(100% - 100px);
}

#circulo.esquerda path {
  fill: crimson;
}

#circulo.direita path {
  fill: teal;
}

<div id="circulo" class="centro" draggable="true">
  <svg  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 294.843 294.843" style="enable-background:new 0 0 294.843 294.843;" xml:space="preserve">
    <path d="M199.628,175.487c-0.632-1.977,0.067-4.131,1.741-5.358l37.422-27.455c5.958-4.371,8.333-11.736,6.049-18.763   c-2.283-7.028-8.533-11.591-15.922-11.625l-46.413-0.215c-2.076-0.01-3.908-1.34-4.558-3.311l-14.547-44.076   c-2.316-7.017-8.586-11.55-15.975-11.551h0c-7.389,0-13.66,4.534-15.976,11.55l-6.557,19.859c-1.039,3.146,0.669,6.54,3.816,7.578   c3.147,1.041,6.539-0.669,7.579-3.816l6.557-19.859c1.014-3.073,3.762-3.312,4.581-3.312c0.818,0,3.566,0.239,4.58,3.312   l14.547,44.077c2.27,6.875,8.658,11.516,15.897,11.55l46.413,0.215c3.236,0.015,4.313,2.555,4.565,3.333   c0.253,0.778,0.875,3.465-1.734,5.379l-37.423,27.455c-5.837,4.283-8.277,11.793-6.072,18.689l14.143,44.222   c0.986,3.083-1.097,4.892-1.759,5.372c-0.662,0.481-3.025,1.904-5.652,0.013l-37.677-27.114c-5.878-4.229-13.776-4.229-19.654,0   l-37.684,27.119c-2.627,1.89-4.991,0.468-5.652-0.012c-0.662-0.481-2.745-2.289-1.76-5.371l14.139-44.229   c2.205-6.895-0.236-14.405-6.072-18.688l-37.421-27.455c-2.609-1.914-1.987-4.602-1.734-5.379c0.253-0.778,1.33-3.318,4.565-3.333   l46.416-0.215c3.313-0.016,5.987-2.714,5.972-6.028c-0.016-3.304-2.699-5.972-6-5.972c-0.009,0-0.019,0-0.028,0l-46.416,0.215   c-7.389,0.034-13.639,4.597-15.922,11.625c-2.283,7.028,0.091,14.393,6.048,18.764l37.421,27.455   c1.673,1.228,2.373,3.381,1.741,5.358l-14.138,44.229c-2.25,7.038,0.159,14.392,6.137,18.734c3,2.179,6.442,3.269,9.886,3.269   c3.419,0,6.84-1.075,9.829-3.225l37.683-27.119c1.685-1.213,3.95-1.213,5.635,0l37.677,27.114c5.998,4.316,13.736,4.3,19.715-0.044   c5.979-4.343,8.387-11.697,6.136-18.736L199.628,175.487z"/>
    <path d="M147.421,0C66.133,0,0,66.133,0,147.421s66.133,147.421,147.421,147.421c3.313,0,6-2.687,6-6s-2.687-6-6-6   C72.75,282.843,12,222.093,12,147.421S72.75,12,147.421,12s135.421,60.75,135.421,135.421c0,46.48-23.42,89.182-62.65,114.228   c-2.793,1.783-3.612,5.493-1.829,8.286c1.783,2.793,5.492,3.612,8.286,1.829c42.7-27.262,68.193-73.745,68.193-124.342   C294.843,66.133,228.71,0,147.421,0z"/>
  </svg>
</div>