JSFiddle - React, Tailwind, and code Playground

by Rusln

HTML

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

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

CSS

div#gallery {
    width:400px;
    height:300px;
    border:1px solid black;
    position:absolute;
    left:400px;
    
}
div#target {
    width:200px;
    height:200px;
    border:1px solid black;
}
div#newHelper {
    position : absolute;
    top:0;
    right:0px;
}

JavaScript

function buildHelper (){  
    return $("#newHelper").clone().append($(this).clone());
} 
function dragStart(e) {
    $('#newHelper').offset({top:e.clientX, left:e.clientX});
}

$('.thumb').draggable({helper:buildHelper,
                       start:dragStart,
                       revert:"invalid"});