Javascript sortable architecture design approach

Question

i am working with jquery sortable connected lists, and i am planning to try to build a small and basic agile tool with 3 columns: backlog, working, done. On internet (special thanks to stackoverflow) i could find enough information to design basic stuff like sortable columns, positions, or saving elements state to a back-end through ajax calls or using localstorage, so next time user can continue where he left.

my main issue right now is how to approach the content for each sortable/li. How to structure and design basic information, like photos, text or icons included inside the lis. my question to stackoverflow is about architecture approach. How i should structure the content so that i can save it to a backend, i can edit it, etc. How was the approach of real web apps.

I was figuring out something like this (i am posting a very basic estructure for simplification purposes), but i dont know if i am doing correct.

<div id="sortable-1">

    <ul class="sortable-list" id="list-1"></ul>

        <li class="sortable-item' id="1">
           <h2 class="title">Event</h2>
           <p class="date">Friday, August 18, 2009</p>
           <p><img src="img/sample.jpg" width="240" height="80" alt=""/></p>
           <p class="content">Aliquam augue neque, rhoncus et dictum in,mauris.</p>
        </li>

        <li></li>
            ........
</div>

thank you very much in advance and regards

Answer 1

The more often I do this stuff I tend to start with a JS object and build the document from there. This allows you to associate each item to its DOM location which simplifies in-place editing. I wouldn't mind knowing whats wrong with this approach.

You can do sorting on the associative objs array before (re)writing to the document.

With jquery:

<div id="sortable-1">
    <ul class="sortable-list" id="list-1"></ul>
</div>
<script>
$(function() {
    var objs = [
        {
            id:1,
            title:'Event1',
            date:'Friday, August 18, 2009',
            imgSrc:'img/sample.jpg', 
            content:'Aliquam augue'
        },{
            id:2,
            title:'Event2',
            date:'Friday, August 28, 2009',
            imgSrc:'img/sample.jpg', 
            content:'Aliquam augue 2'
        }
    ];

    var l1$ = $('#list-1');

    // loop objs data, create elements/append to dom
    $.each(objs, function(i, obj) {
        if (!obj) return true;

        var li$ = $('<li class="sortable-item"/>').attr('id', obj.id).appendTo(l1$);

        // place element in objs to keep track of its place in dom
        obj.li$ = li$;

        $('<h2 class="title"></h2>').text(obj.title).appendTo(li$);
        $('<p class="date"/>').text(obj.title).appendTo(li$);
        $('<img width="240" height="80"/>').attr('src', obj.imgSrc).appendTo($('<p/>').appendTo(li$));
        $('<p class="content"/>').text(obj.content).appendTo(li$);
    });
});
</script>