Sortable li ko

by corinnekm

HTML

<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-2.0.0.debug.js"></script>
<script src="http://cloud.github.com/downloads/rniemeyer/knockout-sortable/knockout-sortable.js"></script>
<link rel="stylesheet" href="http://nceckublermait/customize2/html/_files/style-admin.css">
<div ng:controller="controller">
    <ul class="column" ui:sortable  ng:model="list">
        <li ng:repeat="item in list" class="item">{{item}}</li>
    </ul>
    <br/>
    <ul class="column" ui:sortable  ng:model="list2" >
        <li ng:repeat="item in list" class="item">{{item}}</li>
    </ul>
    <hr />
    <div ng:repeat="item in list">{{item}}</div>
</div>

<script src="http://code.angularjs.org/1.0.2/angular.min.js"></script>
<script src="https://raw.github.com/angular-ui/angular-ui/master/build/angular-ui.min.js"></script>


<div class="admin-LS admin-footerLinks">
    <div class="footer-block group">
        <ul id="groupLinks" class="ui-sortable" data-bind="sortable:{data :linkGroups, connectClass :false}">
            <li class="column">
                 <h2 data-bind="text:name"></h2>  <a data-bind="click:$parent.deleteLinkGroup" class="delete-button"></a> 
                <ul class="ui-sortable links" data-bind="sortable:{data :links, dropOnEmpty:true}">
                    <li>	<a href="javascript:void(0)"><span data-bind="text:label"></span></a>  <a data-bind="click:$parent.deleteLink" class="delete-button"></a>

                    </li>
                </ul> <a data-bind="click:addLink">+</a>

            </li>
        </ul>
        <div data-bind="click:addLinkGroup" class="boxes-delete button-generic button-generic-blue">	<span class="translatable">Add column</span>

        </div>
    </div>
    <div class="main-buttons" style="display:block; clear: both; width: 940px">
        <div style="padding: 15px 0 30px 0; clear: both; text-align: right;">
            <div id="boxes-update" class="button-generic button-generic-blue">	<span...

CSS

textarea {
    width :500px;
    height :200px;
}
.add {
    font-size: 30px;
    text-decoration: none;
    font-weight:bold;
    padding-left :10px
}

ul.links {
   min-height :50px;
    
}

JavaScript

var LinkGroup = function (name, links) {
    var self = this;
    this.links = ko.observableArray(links);
    this.name = ko.observable(name);
    this.deleteLink = function () {
        self.links.remove(this);
    };
    this.addLink = function () {
        self.links.push(new Link("new", "new"));

    };
};

var Link = function (label, url) {
    this.label = ko.observable(label);
    this.url = ko.observable(url);

};


var initialGroups = [
new LinkGroup("Group 1", [
new Link("label1", "url1"),
new Link("label2", "url2"),
new Link("label3", "url3")]),
new LinkGroup("Group 2", [
new Link("label1", "url1"),
new Link("label2", "url2"),
new Link("label3", "url3")])];


var LinkGroupsModel = function (linkGroups) {
    var self = this;

    self.linkGroups = ko.observableArray(linkGroups);
    self.deleteLinkGroup = function () {
        self.linkGroups.remove(this);
    };
    self.addLinkGroup = function () {
        self.linkGroups.push(
        new LinkGroup("New group", [new Link("label1", "url1")]));

    };



};


var vm = new LinkGroupsModel(initialGroups);

ko.applyBindings(vm);