2

我正在使用 jquery 可排序连接列表，并且我计划尝试构建一个具有 3 列的小型基本敏捷工具：积压、工作、完成。在互联网上（特别感谢 stackoverflow），我可以找到足够的信息来设计基本的东西，比如可排序的列、位置，或者通过 ajax 调用或使用本地存储将元素状态保存到后端，这样下次用户可以从他离开的地方继续。

我现在的主要问题是如何处理每个可排序/li 的内容。如何构建和设计基本信息，例如 lis 中包含的照片、文本或图标。我对stackoverflow的问题是关于架构方法的。我应该如何构建内容以便我可以将其保存到后端，我可以编辑它等等。真正的网络应用程序的方法是怎样的。

我正在弄清楚这样的事情（为了简化目的，我发布了一个非常基本的结构），但我不知道我是否做得正确。

<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>

非常感谢你和问候

4

1 回答 1

1

我做这些事情的次数越多，我倾向于从一个 JS 对象开始，然后从那里构建文档。这允许您将每个项目与其 DOM 位置相关联，从而简化就地编辑。我不介意知道这种方法有什么问题。

您可以在（重新）写入文档之前对关联的 objs 数组进行排序。

使用 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>
于 2013-02-26T08:14:22.577 回答