ASP.NET中解决可移动项ListBox控件Tooltip显示异常的方法

咱们先搞清楚问题出在哪：你在Page_Load里给ListItem添加title属性，这是服务器端初始渲染时完成的。当你在UI上拖动调整列表项位置时，如果是纯客户端的拖动操作（没有触发页面回发），服务器根本不知道DOM结构已经变化，自然不会更新这些项的title；就算有回发，如果你的逻辑没覆盖到拖动后的场景，也会出现旧的tooltip内容。

下面给你两个可行的解决思路，按需选择：

思路1：用客户端JavaScript实时维护Tooltip #

这是最直接的方案，因为拖动是客户端操作，咱们直接在前端处理，确保每个列表项的title始终和它的文本内容一致。

具体实现： #

1. 如果你的拖动功能用了jQuery UI Sortable这类插件，可以在拖动完成的回调事件里，遍历ListBox的所有选项更新title：

$(function() {
    // 初始化拖动功能（以jQuery UI为例）
    $("#<%= X.ClientID %>").sortable({
        update: function(event, ui) {
            // 拖动完成后，同步每个option的title和文本
            $("#<%= X.ClientID %> option").each(function() {
                $(this).attr("title", $(this).text());
            });
        }
    });
});

2. 如果是原生HTML5拖动，可以监听drop事件，在DOM更新后执行同步逻辑：

document.getElementById("<%= X.ClientID %>").addEventListener("drop", function() {
    setTimeout(function() {
        // 延迟确保DOM已完成更新
        const options = document.getElementById("<%= X.ClientID %>").options;
        for(let i = 0; i < options.length; i++) {
            options[i].title = options[i].text;
        }
    }, 100);
});

思路2：服务器端回发时重新设置Tooltip #

如果拖动操作会触发页面回发（比如拖动后点击提交按钮），可以在回发时重新给每个ListItem设置title属性。优化后的服务器端代码如下：

protected void Page_Load(object sender, EventArgs e)
{
    // 不管是不是首次加载，都同步title和当前项的文本
    foreach(ListItem li in X.Items)
    {
        li.Attributes["title"] = li.Text;
    }
}

如果你的拖动有对应的自定义服务器端事件，也可以把这段逻辑移到该事件的处理方法里，效果是一样的。

小提示 #

如果你的ListBox用了listbox这个CSS类，也可以用类选择器简化JS代码，比如$(".listbox option").each(...)，这样多个同类型ListBox能统一处理。

内容的提问来源于stack exchange，提问作者tyu