Question

我正在使用Media Box Advanced作为中途停留工具，它非常强大和方便，因为它接受任何媒体，并接受任何列表并自动读取<li>及其订单的数量。

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

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

2）有没有办法让这些变化永久化？

3）灯箱根据<a> <li>中的(<a rel="lightbox[category]")标签对图库进行分类。有没有办法在将<li>从<ul>拖到另一个<a rel>时更改<script> $(function() { $( "#sortable1, #sortable2" ).sortable({ connectWith: ".timeline_content" }).disableSelection(); }); </script>的设置？就像将它们从UL1拖到UL2一样，如何更新{{1}}标签以反映它？

以下是网页：http://www.senseculture.com/timeline_new.html

以下是我正在使用的可拖动代码：

{{1}}

谢谢！

Answer 1

如果您想要在移动项目时采取措施，则应为.sortable（）的“Update”事件创建处理程序。 Here is a post about this topic
要使
始终按特定顺序加载，您必须将序号字段附加到每个项目，然后根据该项目对
进行排序。更改完成后，您必须使用相应的序号值更新数据源，这将确保更改具体。
这将涉及在sortable（）的Update处理程序中修改给定元素的属性。 Here is the API docs, with events towards the bottom类似于：

$（this）.attr（{rel：“whateverHere”}）;

Answer 2

1）通过阅读灯箱的.js（mediaboxadvanced）并找到将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”上，使每个灯箱列表为每个“a”标签附加一个“rel”参数。为了防止它更改不可排序列表项的“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", ""); 
        });
}
});

如何实时更新列表顺序？

2 个答案: