Drag

by dhavaljani

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="bundle-slider-wrapper" id="wrapper">
    <ul class="bundle-slider">
        <li class="bundle-slide slide-1 active">
            <ul class="slide-content slide-1-items" id="bundle">
                <li id="draggable1"><img src="http://lorempixel.com/172/172/food/1" /> </li>
                <li id="draggable2"><img src="http://lorempixel.com/172/172/food/2" /> </li>
                <li id="draggable3"><img src="http://lorempixel.com/172/172/food/3" /> </li>
                <li id="draggable4"> </li>
            </ul>
        </li>
        <li class="bundle-slide slide-2">
            <ul class="slide-content slide-2-items">
                <li><img src="http://lorempixel.com/172/172/city/1" /> </li>
                <li><img src="http://lorempixel.com/172/172/city/2" /> </li>
                <li><img src="http://lorempixel.com/172/172/city/3" /> </li>
                <li><img src="http://lorempixel.com/172/172/city/4" /> </li>
            </ul>
        </li>
    </ul>

    <ul class="add-slider" id="addswap">
        <li><img src="http://lorempixel.com/80/80/food/5" /> </li>
        <li><img src="http://lorempixel.com/80/80/food/6" /> </li>
        <li><img src="http://lorempixel.com/80/80/food/7" /> </li>
        <li><img src="http://lorempixel.com/80/80/food/8" /> </li>
    </ul>
</div>

CSS

.bundle-slider-wrapper {
    display: block;
    overflow: hidden;
    width: 375px;
    height: 667px;
    background: #fff;
    margin: 20px auto;
    padding: 0;
}

.bundle-slider {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.bundle-slide {
    display: none;
    height: 348px;
    background: #333;
    text-align: left;
}

.bundle-slide.active {
    display: block;
}

.slide-content {
    list-style-type: none;
    padding: 0;
}

.slide-content li {
    display: inline-block;
}


/*bottom bar*/

.add-slider {
    list-style-type: none;
    margin: 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
    height: 80px;
    padding: 3px;
}

.add-slider li {
    display: inline-block;
    margin: 0;
}

.fadeit {
    opacity: 0.5;
    background: lightblue;
}

JavaScript

$(function() {
    // There's the gallery and the trash
    var $bundle = $("#bundle"),
        $addswap = $("#addswap");

    // Let the gallery items be draggable
    $("li", $bundle).draggable({
        revert: "invalid", // when not dropped, the item will revert back to its initial position
        containment: "document",
        cursor: "move"
    });

    // Let the trash be droppable, accepting the gallery items
    $addswap.droppable({
        accept: "#bundle > li",
        classes: {
            "ui-droppable-active": "ui-state-highlight"
        },
        drop: function(event, ui) {
            deleteImage(ui.draggable);
        }
    });
    // Let the addswap items be draggable
    $("li", $addswap).draggable({
        revert: "invalid", // when not dropped, the item will revert back to its initial position
        containment: "document",
        cursor: "move"
    });
    // Let the gallery be droppable as well, accepting items from the trash
    $bundle.droppable({
        accept: "#addswap li",
        classes: {
            "ui-droppable-active": "custom-state-active"
        },
        drop: function(event, ui) {
            recycleImage(ui.draggable);
        }
    });
 
    // Image recycle function
    function recycleImage($item) {
        $item.fadeOut(function() {
            $item
                .css("width", "172px")
                .find("img")
                .css("height", "172px")
                .end()
                .appendTo($bundle)
                .fadeIn();
        });
    }

});