JSFiddle - React, Tailwind, and code Playground

by Ezra

HTML

<ul id="admin_video_feed"><li title="" style="opacity: 1;"><span class="drag_handle"></span><a href="/admin/videos/editVideo/51/"><img height="32" src="http://i.ytimg.com/vi/xgJfKfea6fo/hqdefault.jpg">Josh Practices with the 3 Wheeled Unicycle</a><span><a href="/admin/videos/deleteVideo/51">Delete</a></span></li><li title=""><span class="drag_handle"></span><a href="/admin/videos/editVideo/52/"><img height="32" src="http://i.ytimg.com/vi/M7CdTAiaLes/hqdefault.jpg">Tomorrowland 2011 After Movie</a><span><a href="/admin/videos/deleteVideo/52">Delete</a></span></li><li title=""><span class="drag_handle"></span><a href="/admin/videos/editVideo/46/"><img height="32" src="http://i.ytimg.com/vi/Lw2ZiffRyoI/hqdefault.jpg">Josh Grimaldi Straight Jacket Escape</a><span><a href="/admin/videos/deleteVideo/46">Delete</a></span></li><li title=""><span class="drag_handle"></span><a href="/admin/videos/editVideo/49/"><img height="32" src="http://i.ytimg.com/vi/9U6FKgSpAfo/hqdefault.jpg">The Golden Man</a><span><a href="/admin/videos/deleteVideo/49">Delete</a></span></li><li title=""><span class="drag_handle"></span><a href="/admin/videos/editVideo/45/"><img height="32" src="http://i.ytimg.com/vi/vACv5nJWgDw/hqdefault.jpg">Josh Grimaldi Promo Video</a><span><a href="/admin/videos/deleteVideo/45">Delete</a></span></li><li title=""><span class="drag_handle"></span><a href="/admin/videos/editVideo/50/"><img height="32" src="http://i.ytimg.com/vi/kzXbKaDMgx8/hqdefault.jpg">Busking Show</a><span><a href="/admin/videos/deleteVideo/50">Delete</a></span></li><li title="" style="opacity: 1;"><span class="drag_handle"></span><a href="/admin/videos/editVideo/48/"><img height="32" src="http://i.ytimg.com/vi/HjyeMmItm5s/hqdefault.jpg">Ashburton Christmas Parade</a><span><a href="/admin/videos/deleteVideo/48">Delete</a></span></li><li title="" style="opacity: 1;"><span class="drag_handle"></span><a href="/admin/videos/editVideo/47/"><img height="32"...

CSS

ul#example1 {
    width: 200px;
}

#example1 LI,
#example2 LI    {
    cursor: move;
    padding: 3px;
}

#sortable-list, #admin_video_feed, #admin_page_2, #admin_page_3 {
    border: 1px solid #000;
    float: left;
    min-height: 10px;
    margin: 5px;
    width: 700px;
}

#example LI {
    margin: 0;
    background: #F9F9F9;
}

#sortable-list li, #admin_page_2 li, #admin_page_3 li, #admin_video_feed li    { padding:4px 8px; color:#000; list-style:none; width:100%;height:32px; background:#fff; margin:0px 0; border:1px solid #ccc;border-top:2px solid #aaa; }

.drag_handle{width:32px;height:32px;float:left;background:url('/images/handle_32.png') top left no-repeat;cursor:move;margin-right:5px;}

JavaScript

window.addEvent('domready', function()
{
    var example1 = $('admin_video_feed');
    new Sortables(example1,{handle:'.drag_handle'});
});