JSFiddle - React, Tailwind, and code Playground

by Corey Frang

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/ui-lightness/jquery-ui.css">
<div id="from" class="boxy">Transfer me</div>
<div id="to" class="boxy">To here</div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In in volutpat nisl. Suspendisse potenti. Sed dignissim faucibus ante, eu hendrerit mauris pharetra vel. Aliquam mattis, nisl at faucibus fringilla, sapien orci pulvinar mi, interdum rutrum neque urna vel elit. Suspendisse ultrices porttitor libero ut lacinia. Phasellus leo justo, malesuada non iaculis at, feugiat vitae tortor. Donec sit amet urna nec odio pellentesque venenatis sed sit amet nibh. Proin urna nibh, cursus quis condimentum quis, fermentum vitae sem. Mauris luctus, lectus ac placerat eleifend, libero nisi pharetra magna, nec laoreet enim sem non neque. Donec a interdum diam. Ut faucibus quam eget est faucibus quis egestas quam ultrices. Nullam hendrerit libero sed elit semper a iaculis dolor congue. Pellentesque in sem orci. Sed nec nunc blandit felis sagittis imperdiet eu id ante. Phasellus non arcu eget quam suscipit vestibulum in eget lectus. Aliquam erat volutpat.

Nullam id facilisis ligula. Curabitur sagittis iaculis suscipit. Aliquam fringilla tincidunt diam eget condimentum. Sed gravida magna non urna dapibus lobortis. Curabitur bibendum, metus a pharetra suscipit, erat velit dignissim nunc, sed egestas enim elit ut justo. Cras ac risus in nisi fermentum placerat et vel mauris. Sed sed velit sed eros adipiscing dapibus sit amet ac ligula. Integer ligula libero, mattis vel vulputate et, elementum et odio. Morbi dignissim lorem a elit dictum ut pretium nulla luctus. Cras sed ante orci. Ut ut urna risus. Proin ornare purus a nunc luctus at sollicitudin neque egestas. Aliquam ac mattis nibh. Aliquam sit amet nunc metus. Nunc enim nisl, luctus ac luctus nec, ornare eget enim. Cras diam sem, interdum ac blandit nec, fringilla id orci. Phasellus ac nisl lectus. Praesent bibendum, enim at...

CSS

.boxy {
    border: 1px solid #000;
    width: 100px;
    height: 100px;
    background: #abcdef;
}
.ui-effects-transfer {
    background: #abcdef;
    border: 1px dashed #000;
}

#from {
    position: absolute;
    top: 0;
    left: 0;
}

#to {
    position: fixed;
    bottom: 0;
    right: 0;
}

JavaScript

$("body").click(function() {
    $("#from").effect("transfer", {
        to: "#to"
    },2000);
    
    // this simple fix kinda works because left/top happen to be 0
    // if you scroll down partially before clicking you'll see it break again
    
//    $(".ui-effects-transfer").css('position', 'fixed');
    
    // strangely enough try clicking body twice after having scrolled down...
});