Results for vanilla : 4

function getHTTP(url) {
    return new Promise(function (resolve, reject) {
        var xhr = new XMLHttpRequest();
        xhr.open("GET", url);
        xhr.onload = function() {
            if (this.status >= 200 && this.status < 300) {
                resolve(xhr.response);
            }
        };
        xhr.open("GET", url);
        xhr.send();
    });
}

getHTTP("https://www.google.fr")
.then(function (response) {
    // On récupère le resultat de la requête dans la varible "response"
    console.log(response)
})
			

//JS 
function drag_start(event) {
    var style = window.getComputedStyle(event.target, null);
    event.dataTransfer.setData(
    	"text/plain",
    	  (parseInt(style.getPropertyValue("left"),10) - event.clientX) + ',' 
    	+ (parseInt(style.getPropertyValue("top"),10) - event.clientY)+','
    	+ event.target.id
    );

} 
function drag_over(event) { 
    event.preventDefault(); 
    return false; 
} 


on('dragstart','[draggable]',drag_start,false); 
document.body.addEventListener('dragover',drag_over,false); 
document.body.addEventListener('drop',function(event){
	var offset = event.dataTransfer.getData("text/plain").split(',');
    
    icon 				=document.getElementById(offset[2]);console.log(icon);
    //icon.style.position ="absolute";
    icon.style.left 	=(event.clientX + parseInt(offset[0],10)) + 'px';
    icon.style.top 		=(event.clientY + parseInt(offset[1],10)) + 'px';
    event.preventDefault();
    return false;
},false); 


/*CSS*/

[draggable]{
	width:65px;
	height:65px;
	
	z-index: 999;
	position:relative;
}
			

<div id="slider">

  	<!-- Slide Images -->
	<img id="slide-1" src="img1.jpg" alt="img description"/>
  	<img id="slide-2" src="img2.jpg" alt="img description"/>
  	<img id="slide-3" src="img3.jpg" alt="img description"/>
  	<img id="slide-4" src="img4.jpg" alt="img description"/>
	
	<!-- Navigation for the slides -->
	<ul>
		<li><a href="#slide-1">1</a></li>
		<li><a href="#slide-2">2</a></li>
		<li><a href="#slide-3">3</a></li>
		<li><a href="#slide-4">4</a></li>
	</ul>
</div>
SCSS
#slider {
  img {
    position: absolute;
    top: 0;
    left: 0;
    width: 300px;
    height: 200px;
    
    &:target {
      transition: all .5s ease-in-out;
    }
    
    &:not(:target), 
    &:target ~ img#slide-4  {
      position: relative;
      opacity: 0;
    }

    // set initially visible
    &#slide-4 {
      position: absolute;
      opacity: 1;
     }
  }
}
			

       if (typeof obj=='string'){obj=document.getElementById(obj);}
            if (window.CustomEvent) {
              var event = new CustomEvent(ev, {detail: {some: 'data'}})
            } else {
              var event = document.createEvent('CustomEvent')
              event.initCustomEvent('ev', true, true, {some: 'data'})
            }

            obj.dispatchEvent(event)
        }