JSFiddle - React, Tailwind, and code Playground

by kalmarsh80

HTML

<div id="bank" class="bank" data-scope="videos">
    <div class="draggable image-container span3" data-scope="videos" data-id="Nwvil057g-g" data-link="http://www.youtube.com/watch?v=Nwvil057g-g" data-title="On Top of the World - Imagine Dragons" style="background-image: url(http://i.ytimg.com/vi/Nwvil057g-g/default.jpg);">
        <p class="label" style="display: none;">On Top of the World - Imagine Dragons</p>
    </div>
    <div class="draggable image-container span3" data-scope="videos" data-id="wYWN24TFSXY" data-link="http://www.youtube.com/watch?v=wYWN24TFSXY" data-title="Imagine Dragons - &quot;Underdog&quot;" style="background-image: url(http://i.ytimg.com/vi/wYWN24TFSXY/default.jpg);">
        <p class="label" style="display: none;">Imagine Dragons - "Underdog"</p>
    </div>
</div>
<div id="dropbox" data-scope="videos"></div>

CSS

#dropbox {
    border: 2px dotted black;
    display:block;
    height:20px;
    margin-bottom:5px;
    height:auto;
    min-height:20px;
    width:90%;
    hei display:block;
    background:yellow;
}
.bank {
    margin:5px;
    width:90%;
    display:block;
    height:250px;
    background:#ccc;
}
.image-container {
    width: 240px;
    height: 240px;
    background-size: cover;
    background-image:"http://i.stack.imgur.com/2OrtT.jpg";
    background-repeat: no-repeat;
    background-position: 50% 50%;
    display: inline-block;
    margin-right:5px;
    cursor: move;
}
.thumbVid {
    width:150px;
    height:90px;
}

JavaScript

$(document).ready(function () {
    //$(".draggable").live("mousedown", function(){
        $('.draggable').each(function (index, div) {
            var scope = $(this).attr('data-scope');
            $(div).draggable({
                helper: 'clone'
            });
        });
    //});
    $('#dropbox').droppable({
        accept: ".draggable",
        tolerance: "pointer",
        drop: function (event, ui) {
            ui.draggable.remove();
            //$(this).append("<div>" + ui.draggable + "</div>");
            //alert(ui.draggable.attr('data-id'));
            var x = ui.draggable;
            $(this).append(createThumbInfo(x.attr('data-id'), x.attr('data-link'), x.attr('data-title'), x));
        }
    });
});

function createThumbInfo(vidId, vidLink, vidTitle, obj) {
    var ret = "<div data-id='" + vidId + "' data-link='" + vidLink + "' data-title='" + vidTitle + "'><table><tbody><tr><td><img src='http://i.ytimg.com/vi/" + vidId + "/default.jpg'></td><td><strong>" + vidTitle + "</strong><br/><span>" + vidLink + "</span></td><td><button type='button' class='btn_remove_item'>delete</button></td></tr></tbody></table></div>";

    return ret;
}

$(".btn_remove_item").live('click', function () {
    var item = $(this).parent().parent().parent().parent().parent();
    $("#bank").append("<div class='draggable image-container span3' data-scope='videos' data-id='" + item.attr('data-id') + "' data-link='" + item.attr('data-link') + "' data-title='" + item.attr('data-title') + "' style='background-image: url(http://i.ytimg.com/vi/" + item.attr('data-id') + "/default.jpg);'><p class='label' style='display: none;'>" + item.attr('data-title') + "</p></div>");
        $('.draggable').each(function (index, div) {
            var scope = $(this).attr('data-scope');
            $(div).draggable({
                helper: 'clone'
            });
        });
    item.remove();
});