0

我正在使用 Media Box Advanced 作为中转工具,它非常强大和方便,因为它接受任何媒体,并获取任何列表并自动读取数量<li>及其顺序。

我为这些列表引入了可拖动功能,使用 jquery .draggable 对它们重新排序。它们也可以从一个 UL 拖到另一个。但是,当我点击这些弹出灯箱时,顺序并没有改变。我的问题如下:

1)如何让页面实时读取这些更改并重新排序灯箱?

2)有没有办法使这些变化永久化?

3) 灯箱<a><li> (<a rel="lightbox[category]"). 有没有办法改变<li>它们从一个拖到<ul>另一个时的设置?就像它们从 UL1 拖到 UL2 一样,我如何更新<a rel>标签以反映这一点?

这是网页:http ://www.senseculture.com/timeline_new.html

这是我正在使用的可拖动代码:

<script>
  $(function() {
        $( "#sortable1, #sortable2" ).sortable({
            connectWith: ".timeline_content"
        }).disableSelection();
    });
</script>

谢谢!

4

2 回答 2

1
  1. 如果您想在项目被移动时采取行动,您应该为 .sortable() 的“更新”事件创建一个处理程序。 这是关于这个主题的帖子
  2. 为了使
  3. 总是按特定顺序加载,您必须为每个项目附加一个序数字段,然后对
  4. 基于此。更改完成后,您必须使用相应的序数值更新数据源,这将确保更改是具体的。
  5. 这将涉及在 sortable() 的更新处理程序中修改给定元素的属性。这是 API 文档,底部有事件,例如:

    $(this).attr({rel: "whateverHere"});

于 2012-11-26T22:08:22.387 回答
1

1) 通过阅读灯箱 (mediaboxadvanced) 的 .js 并找到将 UL 加载到灯箱中的函数来解决这个问题。每次对列表排序时,都会重新计算灯箱:

$( "#sortable1, #sortable2, #my_timeline" ).sortable({
update: function(event, ui) {
    Mediabox.scanPage();
}
});

2) 这可以用 PHP 完成:jQuery Connected Sortable Lists, Save Order to MySQL

3) 同 1),在“receive”上,使每个灯箱列表附加一个“rel”参数到每个“a”标签。为了防止它改变不可排序列表项的“rel”标签,我添加了一个函数来确保它们的“rel”标签保持为空。

$( "#sortable1, #sortable2, #my_timeline" ).sortable({
update: function(event, ui) {
    Mediabox.scanPage();
}
receive: function(event, ui) {

        $(".timeline_content").each(function(i) {
        $(this).find("a").attr("rel", "lightbox[set" + (i+1) + "]");
        });
        $(".non_sortable").each(function(i) {
        $(this).find("a").attr("rel", ""); 
        });
}
});
于 2012-11-30T18:28:02.137 回答