jQuery实现穿梭框

<style type="text/css">
    #setList {
        margin:0 auto;
        display:flex;
        justify-content:space-around;
        align-items:center;
    }
    #setColumnNotShow, #setColumnShow {
        width:34%;
        height:300px;
        border:1px solid #dcdfe6;
        display:inline-block;
        border-radius:8px;
        text-indent:1em;
    }
    #setColumnNotShow {
        margin-left:40px;
    }
    .setButtonGroup {
         width:8%;
         height:300px;
         display:inline-block;
         padding-top:100px;
         box-sizing:border-box;
  
    }
    .list-header{
        background: #f5f7fa; 
        height:30px;
        line-height:30px;
        border-radius: 6px 6px 0 0;
        font-weight:bold;
    }
    .setButtonGroup {
  
    }
    .setButtonGroup span {
        display:inline-block!important;
        width:22px;
        height:22px;
        background:#1A9EEE;
        margin :5px 0;
        border-radius:2px;
        cursor:pointer;
        text-align:center;
    }

    span img {
        
         margin-top:2px;
    }
    .btnsGroup input {
        border:none;
        outline:none;
        padding:4px 8px;
        border-radius: 5px;
        font-size:14px;
    }
    #leftUl,#rightUl {
        height:270px;
        overflow:auto;
    }
    #Ul1 {
        color:#c0c4cc;
    }
    li:hover {
        cursor:pointer;
    }

    .active{
        background:#1A9EEE;
        color:white!important;
    }
</style>

    <div id="setList">
        <div id="setColumnNotShow">
            <div class="list-header">未显示</div>

            <ul id="leftUl"></ul>
        </div>
        <div class="setButtonGroup">
          
            <span onclick="arrowDoubleRight()"><img src="<%=  Bizsolution.BasicFacility.Config.ConfigManager.GetConfigKeys("PassportAdress") %>images/setColumnImg/arrow-double-right.png"/></span>
            <span onclick="arrowRightBold()"><img src="<%=  Bizsolution.BasicFacility.Config.ConfigManager.GetConfigKeys("PassportAdress") %>images/setColumnImg/arrow-right-bold.png"/></span>
            <span onclick="arrowdoubleLeft()"><img src="<%=  Bizsolution.BasicFacility.Config.ConfigManager.GetConfigKeys("PassportAdress") %>images/setColumnImg/arrow-double-left.png"/></span>
            <span onclick="arrowLeftBold()"><img src="<%=  Bizsolution.BasicFacility.Config.ConfigManager.GetConfigKeys("PassportAdress") %>images/setColumnImg/arrow-left-bold.png"/></span>
        </div>
        <div id="setColumnShow">
            <div class="list-header">已显示</div>
             <div id="rightUl">
                <ul id="Ul1"></ul>
                <ul id="Ul2"></ul>
             </div>

        </div>
      <div class="setButtonGroup">
             <span onclick="liTop()"><img src="<%=  Bizsolution.BasicFacility.Config.ConfigManager.GetConfigKeys("PassportAdress") %>images/setColumnImg/top.png"/></span>
             <span onclick="directionUp()"><img src="<%=  Bizsolution.BasicFacility.Config.ConfigManager.GetConfigKeys("PassportAdress") %>images/setColumnImg/direction-up.png"/></span>
             <span onclick="directionDown()"><img src="<%=  Bizsolution.BasicFacility.Config.ConfigManager.GetConfigKeys("PassportAdress") %>images/setColumnImg/direction-down.png"/></span>
             <span onclick="liBottom()"><img src="<%=  Bizsolution.BasicFacility.Config.ConfigManager.GetConfigKeys("PassportAdress") %>images/setColumnImg/bottom.png"/></span>
        </div>
    </div>
    <div style="width:100%;height:1px;background:#dcdfe6;margin:20px 0;"></div>
    <div style="width:100%;text-align:right;" class="btnsGroup">
        <input type="button" value="确定" onclick="btncancel()" style="background:#1A9EEE;color:white;"/>
        <input type="button"  value="取消" onclick="btnCancel()" style="border-color:#dcdfe6;"/>
        <input type="button"  value="恢复默认" onclick="btnRestoreDefault()" style="border-color:#dcdfe6;"/>
    </div>

    //未显示 li点击事件   
    $("#leftUl").on("click", "li", function () {
        $(this).toggleClass("active");//添加class
    });
    //已显示 li点击事件   
    $("#Ul2").on("click", "li", function () {
        $(this).toggleClass("active");//添加class
    });



//******************左右操作按钮********************************
   //未显示》》》》已显示（全部）
    function arrowDoubleRight() {
        $("#Ul2").append($("#leftUl").html());                              //全部增加到已显示
        $("#leftUl").html("");                                              //清空未显示
    }
    //未显示》》》》已显示（部分）
    function arrowRightBold() {
        $("#leftUl .active").each(function () {
            $("#Ul2").append("<li>" + $(this).text() + "</li>");          //增加li
            $("#leftUl li").remove(".active");                          //删除li
        });
    }
    //已显示》》》》未显示（全部）
    function arrowdoubleLeft() {
        $("#leftUl").append($("#Ul2").html());                              //全部增加到未显示
        $("#Ul2").html("");                                                 //清空已显示
    }
    //已显示》》》》未显示（部分选中）
    function arrowLeftBold() {
        $("#Ul2 .active").each(function () {
            $("#leftUl").append("<li>" + $(this).text() + "</li>");          //增加li
            $("#Ul2 li").remove(".active");                             //删除li
        });
    }

//********************上下按钮操作事件*******************
    //一次性移到最上
    function liTop() {
        $("#Ul2").prepend($("#Ul2 .active"));       //放置最前
    }
    //上移
    function directionUp() {
        var index = $("#Ul2").find('.active');              //找到选中的li
        if ($("#Ul2 .active").length == 1) {
            if (index.index() != 0) {                       //下标不是0，都可以上移
                index.prev().before(index);
            }
        }
    }
    //下移
    function directionDown() {
        var index = $("#Ul2").find('.active');              //找到选中的li
        if ($("#Ul2 .active").length == 1) {
           index.next().after(index);                  
        }
    }
    //一次性移到最下
    function liBottom() {
        $("#Ul2").append($("#Ul2 .active"));                //放置最后
    }