JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="countries">
    <li><img src="http://www.worldatlas.com/aatlas/flags/ci.gif"/></li>
    <li><img src="http://www.worldatlas.com/aatlas/flags/cm.gif"/></li>
    <li><img src="http://www.worldatlas.com/aatlas/flags/bf.gif"/></li>
    <li><img src="http://www.worldatlas.com/aatlas/flags/bw.gif"/></li>
</ul>

CSS

.countries {
    padding: 5px 20px;
    background-color: #222;
}
.countries li {
    cursor: move;
    list-style-type: none;
    padding-right: 20px;
}

JavaScript

window.addEvent("domready", function() {
   var sortables = new Sortables(".countries", {
        constrain: true,
        clone: true,
        opacity: 0.5
    });
});