Question

我的网络应用程序具有一项功能，用户可以在其中创建最多五个项目的列表。创建列表后，我们会在第一个项目后自动命名，但用户也可以键入自定义名称。所以，你会有这样的事情：

Name: [ Item 1 ] (this is a text box)

- Item 1
- Item 2
- Item 3
- Item 4
- Item 5

我还设置了jQuery UI的sortable交互，以便用户可以单击并拖动以重新排列列表中的项目。现在，我想要做的是在用户完成拖动后的第一个项目之后自动重命名列表，但仅当他们没有输入自定义名称时（可以通过将名称与原始第一项进行比较，看它们是否匹配）。

我知道sortable提供了许多可用于运行自定义函数的事件（例如start和stop）。问题是我需要在拖动发生之前和之后运行函数才能进行比较，但是（据我所知）我无法在它们之间传递数据 - start中定义的变量可以不能在stop中使用。那我怎么写呢？

Answer 1

可能不是最具学术性的答案，但这是一个想法：

为什么你需要开始活动？如果我理解正确，你似乎关心的是将列表的第一项放在字段中，但仅限于名称不是手写的。你可能需要一个启动事件，如果你做这个droppable，添加第一个项目删除列表的名称，但我想你已经有了？

var nameIsCustom=false;
$("#ul").sortable(
{
    stop: function(event,ui)
    {
        nameIsCustom = true;
        $("ul > li").each(function()
        {
            if($("#name").val() == $(this).text())
            {nameIsCustom = false;}
        });
        if(!nameIsCustom)
        {
            $("#name").val($("#ul > li:first").text());
        }
    }
});

Answer 2

我通过在start上保存全局变量中的第一项来解决此问题，然后使用它来与stop上的当前标题进行比较。也许不是最好的方法，但确实有效：

var saveFirstItem = function(first_item) {
    startFirstItem = first_item;
};

$(document).ready(function(){
    $("#list").sortable({
        start: function(event, ui){
            var first_item = $("#list li:first-child").text();
            saveFirstItem(first_item);
        },
        stop: function(event, ui){      
            var first_item = $("#list li:first-child").text();      
            var current_title = $("#title").val();

            if (current_title == startFirstItem){
                $("#title").val(first_item);
            }
        }
    });
});

jQuery UI sortable：在拖动之前和之后获取第一个项目

2 个答案: