JSFiddle - React, Tailwind, and code Playground

by kmburke84

HTML

<div class="row">
        <div class="col-md-3 customNavCol">
            <ul>
                <li data-file="description_1">
                    <img src="assets/portfolio_images/WalzEq.jpg" height="50" width="50" class="draggable">Project #1
                </li>
                <li data-file="description_2">
                    <img src="assets/portfolio_images/401WaterSt.jpg" height="50" width="50" class="draggable">Project #2
                </li>
                <li data-file="description_3">
                    <img src="assets/portfolio_images/JunctionCity.jpg" height="50" width="50" class="draggable">Project #3
                </li>
                <li data-file="description_4">
                    <img src="assets/portfolio_images/SkillsUSA.jpg" height="50" width="50" class="draggable">Project #4
                </li>
                <li data-file="description_5">
                    <img src="assets/portfolio_images/burke_outdoors_1.0.jpg" height="50" width="50" class="draggable">Project #5
                </li>
                <li data-file="description_6">
                    <img src="assets/portfolio_images/burke_outdoors_2.0.jpg" height="50" width="50" class="draggable">Project #6
                </li>
                <li data-file="description_7">
                    <img src="assets/portfolio_images/ServiceCatalog_ISU.jpg" height="50" width="50" class="draggable">Project #7
                </li>
                <li data-file="description_8">
                    <img src="assets/portfolio_images/AT_Home.jpg" height="50" width="50" class="draggable">Project #8
                </li>
                <li data-file="description_9">
                    <img src="assets/portfolio_images/leapForward.jpg" height="50" width="50" class="draggable">Project #9
                </li>
                <li data-file="description_10">
                    <img src="assets/portfolio_images/burke_outdoors_3.0.jpg" height="50" width="50" class="draggable">Project #10
 ...

CSS

.customNavCol {

    /*border-right: 2px solid gray;*/
}

.customNavCol li {
    padding-bottom: 30px;
}

#droppable {
    border: 1px dashed black;
    height: 500px;
    width: 750px;
    clear: both;
    display: block;

}

.col-md-3, .customNavCol ul, li {
    list-style-type: none;
}

.draggable {
    border: 1px solid black;

}

.customContentPage {
    border: 1px solid gray;
}

.image-custom {

}

.ui-droppable {
    background-size: 100%;
    background-repeat: no-repeat;
    width: 750px;
    height: 500px;
}

.stretch {
    width: 100%;
    height: 100%;
}

#description_1, #description_2,
#description_3, #description_4,
#description_5, #description_6,
#description_7, #description_8,
#description_9, #description_10 {
    width: 650px;

}

#description_1 {
    visibility:hidden;
}

#description_2 {
    visibility: hidden;
}

#description_3 {
    visibility:hidden;
}

#description_4 {
    visibility: hidden;
}

#description_5 {
    visibility:hidden;
}

#description_6 {
    visibility: hidden;
}

#description_7 {
    visibility:hidden;
}

#description_8 {
    visibility: hidden;
}

#description_9 {
    visibility:hidden;
}

#description_10 {
    visibility: hidden;
}

JavaScript

/**
 * Created with IntelliJ IDEA.
 * User: Kevin Burke
 * Date: 8/16/14
 * Time: 9:00 PM
 */
$(function(){
    $( ".draggable" ).draggable({containment:'document',
        revert:true, snap: true, snapMode:"inner"});

    $("#droppable").droppable({
        accept: ".draggable",
        drop: function(event, ui){

            var href = $(ui.draggable.find('li').prop('src'));
            console.log(ui);
            var getThumbID = function(ui) {
                return ui.draggable.data('file');
            };

            $(href).html("<img src='" + href + "'"+"width='750'"+ "height='500'">"");

            $("#droppable").css('background-image', 'url('+href+')');
            console.log(getThumbID(ui));
        }

    });
});