JSFiddle - React, Tailwind, and code Playground

by stevea

HTML

<div id='gallery'>
    Gallery
    <br />
    <img id='clown' class='thumb' src='http://s20.postimg.org/pcud7n2zt/t_clown.jpg'  />
    <img id='cateye' class='thumb' src='http://s20.postimg.org/ddh45wqnd/t_cateye.jpg' />
</div>
 

<div id='shiftDiv'>
    <br />
    <img src="http://s20.postimg.org/rvebdwhyh/hold_Shift.gif" />
</div>

CSS

div#gallery {
    width:300px;
    height:200px;
    border:1px solid black;
    position:absolute;
    left:150px;
    
}
div#target {
    width:200px;
    height:200px;
    border:1px solid black;
}
div#shiftDiv {
    position : absolute;
    top:200px;
    left:300px;
}

JavaScript

function buildHelper (){  
    return $("#shiftDiv").clone().prepend($(this).clone());
} 

$('.thumb').draggable({helper:buildHelper});