JQuery双列表交互模态窗口，列表项互相、上下移动

天气：今天下雨

要做做这么个东西：

原谅我没有对angular有那么深的理解，dom操作什么的还是JQuery方便

没指望这文章能派上用场，只是记性不好，这些组件什么的记录一下，现在代码写的超级烂，也给以后找个乐子吧：

// 模态窗口controller
angular.module('app')
    .controller('SelDevCtrl', ['$scope', '$http','$state', function($scope,$http,$state) {
      $('#abox').on('click','ul li',function(){
        $('#abox ul li').removeClass('selItemActive');
        $(this).addClass('selItemActive');
      });
      $('#nbox').on('click','ul li',function(){
        $('#nbox ul li').removeClass('selItemActive');
        $(this).addClass('selItemActive');
      });
      // 变换顺序
      // 按钮上
      $('#up').on('click',function(){
        var index = $('#nbox .selItemActive').index();
        // console.log(index);
        if(index){
          $('#nbox .selItemActive').insertBefore($('#nbox ul li').eq(index-1));
        }
      });
      // 按钮下
      $('#down').on('click',function(){
        var index = $('#nbox .selItemActive').index();
        var len = $('#nbox ul li').size();
        // console.log(len);
        if(index < len - 1){
          $('#nbox .selItemActive').insertAfter($('#nbox ul li').eq(index+1));
        }
      });
      //从 待选 移动到 已选
      $('#moveToRight').on('click',function(){
        $('#nbox ul').append($('#abox .selItemActive').removeClass('selItemActive'));
        $('#abox .selItemActive').remove();
      });
      //从 已选 移动到 待选
      $('#moveToLeft').on('click',function(){
        $('#abox ul').append($('#nbox .selItemActive').removeClass('selItemActive'));
        $('#nbox .selItemActive').remove();
      });
      //保存按钮
      $('#save').on('click',function(){
        var newnList;
        $('#nbox ul li').each(function(index,domEle){
          if (newnList) {
              newnList += ",";
              newnList += $(this).text().trim();
          } else {
            newnList = $(this).text().trim();
          }
        });
          $http({
            method: "get",
            url: "/nms/assets/js/api/device/columns/save.do",
              params: {
                type:        $('#selectedColumns').attr("layout-type"),
                columns:    newnList
              }
          }).
          success(function(data, status) {
            $('#selectColumns').modal('hide');
            //TODO 刷新页面
            // alert($('#selectedColumns').attr("list-url"));
            window.location.reload();
          });
      })
}]);

 html部分，能看出来主体还是bootstrap的模态窗口：

<!-- Modal -->
<div class="modal fade slide-up disable-scroll" id="selectColumns" tabindex="-1" role="dialog" aria-hidden="false"  ng-controller="SelDevCtrl">
  <div class="modal-dialog ">
    <div class="modal-content-wrapper">
      <div class="modal-content">
        <div class="modal-header clearfix text-left">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="pg-close fs-14"></i>
                </button>
          <h5>请选择显示的列</h5>
        </div>
        <div class="modal-body" style="100%;box-sizing:border-box;overflow:hidden;">
          <div class="selColRow" style="">
            <!-- 待选列 -->
            <div class="selBox" id="abox">
              <ul id="unselectColumns">
                <li ng-repeat="x in alist">
                  {{x}}
                </li>
              </ul>
            </div>
            <!-- 移动按钮 -->
            <div class="selBtnWrap" style="">
              <div>
                <button class="selBoxBtn" style="margin-top:55px;" id="moveToRight">&gt;</button>
                <button class="selBoxBtn m-t-10" id="moveToLeft">&lt;</button>
              </div>
            </div>
            <!-- 已选择列 -->
            <div class="selBox" id="nbox">
              <ul id="selectedColumns" layout-type="device">
                <li ng-repeat="x in nlist">
                  {{x}}
                </li>
              </ul>
            </div>
            <!-- 按钮 右侧排序 -->
            <div class="selBtnWrap">
              <button class="selBoxBtn"  style="margin-top:55px;" id="up">上</button>
              <button class="selBoxBtn m-t-10" id="down">下</button>
            </div>
            <div style="clear:both;"></div>
          </div>
          <!-- 按钮 保存 取消 -->
          <div style="100%;padding-top:30px;overflow:hidden;">
            <div style="float:right;">
              <button class="btn btn-complete btn-cons" id="save">保存</button>
              <button class="btn btn-default btn-cons" data-dismiss="modal" aria-hidden="true">取消</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

无论什么办法，能尽快解决问题就好