像listbox那样的控件，旁边有上下两个换钮，实现控件内数据位置交换应该用哪类控件，如何实现？

Question

-------------
|1           | up
|2           | 
|3           | down
|4           |
--------------
样子就像上面那种样子，如果选中2 按下DOWN，数据2就眼数据3的位置交换，点击UP动作相反，这个应该如何实现，用什么控件控制，第一条数据，不可交换

Answer 1

//向上一位
        function ListBoxUp()
        {
            var destinationList=window.document.getElementById("<%=DestinationListBox.ClientID%>");
            var destinationLength = destinationList.options.length;
            sel_count=0;
            for (i=destinationLength-1; i>=0; i--)
            {
                if(destinationList.options(i).selected)
                    sel_count++;
            }            if(sel_count==0)
            {
                alert("调整已选节点的顺序时，请选择其中一项！");
                return;
            }
            else if(sel_count>1)
            {
                alert("调整已选节点的顺序时，只能选择其中一项！");
                return;
            }            i=destinationList.selectedIndex;
            var temp;            if(i!=0)//& i!=1
            {
                var my_option = document.createElement("OPTION");
                my_option.text=destinationList.options(i).text;
                my_option.value=destinationList.options(i).value;
                
                if(i<destinationLength-1)
                {
                    var v1 = destinationList.options(i-1).value;
                    var v2 = destinationList.options(i+1).value;
                    if(v1 == v2)
                    {
                        alert("不能移动，会产生相临的节点！");
                        return;
                    }
                }
                if (i == 1)
                    temp = destinationList.options(i - 1).value;
                if(i>=2)
                    temp = destinationList.options(i-2).value;
                
                if(my_option.value == temp)
                {
                    alert("不能移到相临的节点处！");
                    return;
                }
                else
                {
                    destinationList.add(my_option,i-1);
                    destinationList.remove(i+1);
                    destinationList.options(i-1).selected=true;
                }
            }
            SetAllPerson();
        }        //向下一位
        function ListBoxDown()
        {
            var destinationList=window.document.getElementById("<%=DestinationListBox.ClientID%>");
            var destinationLength = destinationList.options.length;            sel_count=0;
            for (i=destinationLength-1; i>=0; i--)
            {
                if(destinationList.options(i).selected)
                sel_count++;
            }            if(sel_count==0)
            {
                alert("调整已选节点的顺序时，请选择其中一项！");
                return;
            }
            else if(sel_count>1)
            {
                alert("调整已选节点的顺序时，只能选择其中一项！");
                return;
            }            i=destinationList.selectedIndex;
            var temp;            if (i == 0) {
                var my_option = document.createElement("OPTION");
                my_option.text = destinationList.options(i).text;
                my_option.value = destinationList.options(i).value;
                if (i < destinationLength - 2)
                    temp = destinationList.options(i + 2).value;                if (my_option.value == temp) {
                    alert("不能移到相临的节点处！");
                    return;
                }                destinationList.add(my_option, i + 2);
                destinationList.remove(i);
                destinationList.options(i + 1).selected = true;
            }   
            if(i!=0 & i!=destinationLength-1)
            {
                var my_option = document.createElement("OPTION");
                my_option.text=destinationList.options(i).text;
                my_option.value=destinationList.options(i).value;
                
                var v1 = destinationList.options(i-1).value;
                var v2 = destinationList.options(i+1).value;
                if(v1 == v2)
                {
                    alert("不能移动，会产生相临的节点！");
                    return;
                }                if(i<destinationLength-2)
                    temp = destinationList.options(i+2).value;
                
                if(my_option.value == temp)
                {
                    alert("不能移到相临的节点处！");
                    return;
                }                destinationList.add(my_option,i+2);
                destinationList.remove(i);
                destinationList.options(i+1).selected=true;
            }
            SetAllPerson();
        }

Answer 2

<input type="button" class="SmallInput" value=" ↑ " onclick="ListBoxUp();" />
                    <br />
                    <br />
                    <input type="button" class="SmallInput" value=" ↓ " onclick="ListBoxDown();" />//destinationList就是你要操作的LISTBOX