knockout-sortable - connected lists

https://github.com/rniemeyer/knockout-sortable

HTML

<script src="http://knockoutjs.com/downloads/knockout-2.2.1.js"></script>
<script src="https://rawgithub.com/rniemeyer/knockout-sortable/master/build/knockout-sortable.js"></script>
<div id="main">
    <div class="gallery">
        <h3>Gallery</h3>
        <div id="gallery" data-bind="sortable: { data: gallery }">
            <span data-bind="text: name"></span>
        </div>
    </div>

    <div class="images">
        <h3>Images</h3>
        <div id="images" data-bind="sortable: { data: images }">
            <span data-bind="text: name"></span>        
        </div>
    </div>
</div>

CSS

html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

body {
    font-family: Arial;
}


h3 {
    font-weight:bold;
    text-decoration:underline;
    margin-bottom:8px;
}

.gallery, .images {
    width:50%;
    float:left;
    padding:20px;
}

.gallery div, .images div {
    border:1px solid #ccc;
    padding:20px;
}

.gallery span, .images span {
    border:1px dashed #ccc;
    padding:10px;
    display:block;
    margin-bottom:8px;
    height:40px !important;
}

.gallery span.ui-sortable-helper, .images span.ui-sortable-helper {
    box-shadow: 0 1px 1px 0 rgba(50, 50, 50, 0.3);
    border:none;
}
}

JavaScript

var Task = function (name) {
    this.name = ko.observable(name);
}

var ViewModel = function () {
    var self = this;

    self.gallery = ko.observableArray([
        new Task("image1.jpg"),
        new Task("image2.jpg"),
        new Task("image3.jpg")
    ]);

    self.images = ko.observableArray([
        new Task("image4.jpg"),
        new Task("image5.jpg"),
        new Task("image6.jpg")
    ]);
    
};

ko.applyBindings(new ViewModel());