Jquery ui jQuery UI可排序:在拖动之前和之后获取第一项

Jquery ui jQuery UI可排序:在拖动之前和之后获取第一项,jquery-ui,events,jquery-ui-sortable,Jquery Ui,Events,Jquery Ui Sortable,“我的web应用”有一个功能,用户可以创建最多五个项目的列表。创建列表时,我们会自动将其命名为第一项之后的名称,不过用户也可以键入自定义名称。因此,您将有如下内容: Name: [ Item 1 ] (this is a text box) - Item 1 - Item 2 - Item 3 - Item 4 - Item 5 我还设置了jQueryUI的sortable交互,以便用户可以单击并拖动以重新排列列表中的项目。现在,我想做的是在用户完成拖动后,无论第一项是什么,都自动重命名列表

“我的web应用”有一个功能,用户可以创建最多五个项目的列表。创建列表时,我们会自动将其命名为第一项之后的名称,不过用户也可以键入自定义名称。因此,您将有如下内容:

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

- Item 1
- Item 2
- Item 3
- Item 4
- Item 5
我还设置了jQueryUI的
sortable
交互,以便用户可以单击并拖动以重新排列列表中的项目。现在,我想做的是在用户完成拖动后,无论第一项是什么,都自动重命名列表,但前提是用户没有输入自定义名称(这可以通过将名称与原始第一项进行比较并查看它们是否匹配来确定)


我知道
sortable
提供了许多事件,您可以使用这些事件来运行自定义函数(如
start
stop
)。问题是,为了进行比较,我需要在拖动发生之前和之后运行函数,但是(据我所知)我不能在它们之间传递数据-在
start
中定义的变量不能在
stop
中使用。那么我该怎么写呢?

可能不是最学术的答案,但这里有一个想法:

为什么需要启动活动?如果我理解正确,您似乎只关心将列表的第一项放在字段中,但前提是名称不是手写的。 如果您将此下拉列表设为可下拉列表,您可能需要一个开始事件来添加第一个从列表名称中删除的项目,但我想您已经有了它

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());
        }
    }
});

我通过在
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);
            }
        }
    });
});

我认为这更多的是一个信念的问题,你能容忍一个更全局的变量(在事件函数之外)在一个答案中吗?:-)