[Javascript]Listbox的上下位置交换

我想很多人应该都写过Listbox组件的操作，可能也都写过Listbox item的上下移动功能，功能如下图：

一个Listbox搭配两个按钮，一个向上一个向下，按下向上钮可以将item往上移一位，案下向下钮可以将item往下移一位，以下简单实践一下这个功能：

先在网页上拉一个Listbox跟两个Imagebutton，并在两个按钮上注册好Sort事件，一个传入Up，一个传Down：

            中国台北市
            中国台北县
            桃园市
            桃园县
            新竹市
            新竹县

接着加入要做item交换的js code，主要是透过Listbox的swapNode功能来达成。

        {
            var tSelectedIndex = tNowIndex;
            var tListOptions = tList.options;
            
            //先判断要做swap的item存不存在
            if (tSelectedIndex + tIndex >= 0 && tListOptions[tSelectedIndex+tIndex] && tListOptions[tSelectedIndex])
            {             
                //进行swapNode
                tListOptions[tSelectedIndex + tIndex].swapNode(tListOptions[tSelectedIndex]);
            }
        }

        //进行listitem的排序
        function Sort(pAction)          
        {
            var tSortField = document.getElementById('ListBox1');    //排序字段    
            var tSelectedIndex = tSortField.selectedIndex;
            
            //如果没有选择任何一个item
            if (tSelectedIndex == -1)
            {
                alert("请先选择欲调整的显示字段!!");
            }
            else
            {
                for(var i = 0 ; i < tSortField.options.length ; i++)
                {
　　                if (tSortField.options[i].selected == true)
　　                {
　　                    if(pAction == 'Up')
　　                    {   
　　                        //上移
                            ListSwapNode(i,-1,tSortField);                           
                        }
                        else
                        {
                            //下移
                            ListSwapNode(i,+1,tSortField);                           
                        }
                        break;
　　                }
　　            }
　　        }
        }

如此就简单的完成了这个功能，不过我这个范例只能一次选择一个item，如果要一次选择多个，还需要再做一些调整啰。

游舒帆 (gipi)

探索原力Co-founder，曾任TutorABC协理与鼎新电脑总监，并曾获选两届微软最有价值专家 ( MVP )，离开职场后创办探索原力，致力于协助青少年培养面对未来的能力。认为教育与组织育才其实息息相关，都是在为未来储备能量，2018年起成立为期一年的专题课程《职涯跃升的关键24堂课》，为培养中国台湾未来的领袖而努力。

原文:大专栏 [Javascript]Listbox的上下位置交换

原文地址：https://www.cnblogs.com/petewell/p/11516388.html