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