JSFiddle - React, Tailwind, and code Playground

by Ezra

HTML

<div id="listBox">
    <ul id="list">
        <li>
            <div class="box">
                <div class="boxItem"><img src="http://i1.ytimg.com/vi/ghC3gqNQJPQ/default.jpg" /></div>
                <div class="boxOverlay"><img src="http://files.softicons.com/download/toolbar-icons/fugue-16px-icons-by-yusuke-kamiyamane/png/16x16/camera.png" /></div>
            </div>
            <div class="handle"></div>
        </li>
        <li>
            <div class="box">
                <div class="boxItem"><img src="http://i1.ytimg.com/vi/tHBBCpZ5XMs/default.jpg" /></div>
                <div class="boxOverlay"><img src="http://files.softicons.com/download/toolbar-icons/fugue-16px-icons-by-yusuke-kamiyamane/png/16x16/camera.png" /></div>
            </div>
            <div class="handle"></div>
        </li>
        <li>
            <div class="box">
                <div class="boxItem"><img src="http://i1.ytimg.com/vi/tHBBCpZ5XMs/default.jpg" /></div>
                <div class="boxOverlay"><img src="http://files.softicons.com/download/toolbar-icons/fugue-16px-icons-by-yusuke-kamiyamane/png/16x16/camera.png" /></div>
            </div>
            <div class="handle"></div>
        </li>
        <li>
            <div class="box">
                <div class="boxItem"><img src="http://i1.ytimg.com/vi/tHBBCpZ5XMs/default.jpg" /></div>
                <div class="boxOverlay"><img src="http://files.softicons.com/download/toolbar-icons/fugue-16px-icons-by-yusuke-kamiyamane/png/16x16/camera.png" /></div>
            </div>
            <div class="handle"></div>
        </li>
        <li>
            <div class="box">
                <div class="boxItem"><img src="http://i1.ytimg.com/vi/tHBBCpZ5XMs/default.jpg" /></div>
                <div class="boxOverlay"><img src="http://files.softicons.com/download/toolbar-icons/fugue-16px-icons-by-yusuke-kamiyamane/png/16x16/camera.png" /></div>
            </div>
            <div class="handle"></div>
        </li>
    </ul>
</div>

CSS

#list{width:500px;float:left;background-color:#333;}

#listBox{width:500px;float:left;list-style:none;padding:0px;margin:0px;}
#listBox li{width:500px;height:120px;float:left;background-color:#ccc;}

.box{width:180px;height:120px;float:left;position:relative;}
.boxItem{width:180px;height:120px;float:left;background-color:#3fb4ff;}
.boxOverlay{width:16px;height:16px;position:absolute;bottom:10px;left:10px;background-color:#fff;}

.handle{width:20px;height:120px;float:right;cursor:move;background-color:#ff1e00;}

JavaScript

window.addEvent('domready', function() 
{
    new Sortables($('list'),
    {
        handle:'.handle',
        clone:true,
        onStart: function(el)
        {
            el.set('opacity',0);
        },
        onComplete: function(el)
        {
            el.set('opacity',1);
        }
    });
});