Drag Drop

by Dipak1991

HTML

<div class="main-wrapper">
    <div class="list-container"> <a id="next-btn" href="javascript:void(0)">Next</a>

        <ul id="sortable-list" class="connectedSortable">
            <li class="ui-state-default active">Item 1</li>
            <li class="ui-state-default">Item 2</li>
            <li class="ui-state-default">Item 3</li>
            <li class="ui-state-default">Item 4</li>
            <li class="ui-state-default">Item 5</li>
        </ul> <a id="prev-btn" href="javascript:void(0)">prev</a>

    </div>
    <div class="list-options">
        <ul id="options-list" class="connectedSortable">
            <li class="ui-state-highlight">New Item 1</li>
            <li class="ui-state-highlight">New Item 2</li>
            <li class="ui-state-highlight">New Item 3</li>
            <li class="ui-state-highlight">New Item 4</li>
            <li class="ui-state-highlight">New Item 5</li>
        </ul>
    </div>
</div>

CSS

body, html {
    margin :0;
    padding: 0;
}
.wrapper {
    position: absolute;
    top:0;
    bottom:0;
    right:0;
    left:0;
    width: 230px;
    margin: auto;
    border : 1px solid #eee;
}
ul {
    list-style: none;
}
ul > li {
    display : inline-block;
}
#sortable-list li.active {
    display : block
}
#sortable-list li {
    display : none;
}

li.dropped {
    position: relative !important;
    top:auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
}

JavaScript

$("#sortable-list > li, #options-list > li").draggable();

$("#options-list > li").draggable({
    revert: "invalid", 
    cursor: "move",
    hoverClass: "ui-state-active",
    drop: function (event, ui) {
         var target = $(event.target);
            $(ui.draggable).addClass("dropped").appendTo(target);        
    }
});

$("#sortable-list").droppable({
    accept: "li",
    revert: "invalid", 
    hoverClass: "ui-state-active",
    drop: function (event, ui) {
         var target = $(event.target);
            $(ui.draggable).addClass("dropped").appendTo(target);        
    }
});



$("#next-btn").on("click", function () {
    var $currentTarget = $("#sortable-list").find("li.active");
    var $nextTarget = $currentTarget.next();

    $currentTarget.removeClass("active");

    if ($nextTarget.length) {
        $nextTarget.addClass("active");
    } else {
        $("#sortable-list").find("li:first").addClass("active");
    }
});

$("#prev-btn").on("click", function () {
    var $currentTarget = $("#sortable-list").find("li.active");
    var $prevTarget = $currentTarget.prev();

    $currentTarget.removeClass("active");

    if ($prevTarget.length) {
        $prevTarget.addClass("active");
    } else {
        $("#sortable-list").find("li:last").addClass("active");
    }
});