This would be the image centered in the middle of the page ... on the right side a link and on the left another link ... the user would have to click on that image and drag to enter the links ...
Click on a centered image and drag it to the left link or right link?
0
asked by anonymous 14.04.2016 / 19:48
1 answer
2
You can monitor the direction where the circle was moved using the dragstart and dragend events, so you can analyze the properties like x , clientX , screenX .
This way in dragend , you can take an action if it moves left or right.
In the example below, try dragging the circle 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>
14.04.2016 / 20:50