Drag Drop Sort Example 1

by bizamajig

HTML

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
<div class="row">
    <div class="new-item" data-item="6">Item 6</div>
    <div class="new-item" data-item="7">Item 7</div>
    <div class="new-item" data-item="8">Item 8</div>
</div>

<div class="task-list">
    <div>List Item 1</div>
    <div>List Item 2</div>
    <div>List Item 3</div>
</div>

<br />

<div class="task-list">
    <div>List Item 4</div>
    <div>List Item 5</div>
</div>

CSS

.row {
    display: block;
    width: 100%;
    height: auto;
}
.new-item {
    display: inline-block;
    width: auto;
    height: auto;
    padding: 8px 15px;
    border: 1px solid #ccc;
    text-align: center;
    background: #eee;
}

.task-list {
    display: inline-block;
    width: auto;
    height: auto;
    overflow: hidden;
    margin-top: 20px;
}

.task-list div {
    display: block;
    width: 150px;
    border: 1px solid #ccc;
}

.highlight {
    padding: 5px;
    border: 2px dotted #fff09f;
    background: #fffef5;
}

JavaScript

$( '.new-item' ).draggable({
    cursor: 'pointer',
    connectWith: '.task-list',
    helper: 'clone',
    opacity: 0.5,
    zIndex: 10
});

$( '.task-list' ).sortable({
    connectWith: '.task-list',
    cursor: 'pointer'
}).droppable({
    accept: '.new-item',
    activeClass: 'highlight',
    drop: function( event, ui ) {
        var $add_item = $( '<div>' ).html( 'List ' + ui.draggable.html() );
        $add_item.appendTo( this );
    }
/*
//  TEST:
//
stop: function( event, ui ) {
        $(ui.helper).clone(true).removeClass('box ui-draggable ui-draggable-dragging').addClass('box-clone').appendTo('body');
    }
*/
});