js左右选项移动

<!--网页代码-->
<div class="modal" id="modal-primary7">
    <div class="modal-dialog">
        <div class="modal-content">
        <input type="hidden" id="modal7_id">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span></button>
                <h3 class="modal-title">关联用户组</h3>
            </div>
                        <div class="modal-body">
                            <div class="common-relative-left">
                                <div><span>可选择的用户组</span>
                                </div>
                                <div>
                                    <div>
                                        <input type="text" class="form-control">
                                        <img src="../../images/放大镜.svg">
                                    </div>
                                    <!--dataleft  -->
                                    <div class="data-left6" id="edit_usergroup">
                                    </div>
                                </div>
                            </div>
                            <!-- add and romove  -->
                            <div class="add-remove">
                                <button class="btn btn-default " disabled="true"  id="remove6"><span class="glyphicon glyphicon-chevron-left"></span></button>
                                <button class="btn btn-default " disabled="true"  id="add6"><span class="glyphicon glyphicon-chevron-right"></span></button>
                            </div>
                            <!-- selectall -->
                            <div class="select-left-all">
                                <input type="checkbox" id="left-checked6">
                                <span>全选</span>
                            </div>
                            <div class="select-right-all" >
                                <input type="checkbox" id="right-checked6">
                                <span>全选</span>
                            </div>
                            <div class="common-relative-right">
                                <div><span>已选择的用户组</span>
                                </div>
                                <div>
                                    <div>
                                        <input type="text" class="form-control">
                                        <img src="../../images/放大镜.svg">
                                    </div>
                                    <!-- dataright -->
                                    <div class="data-right6" id="edit_usergroup1">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button  type="button" class="btn btn-default newaddbtn2" data-dismiss="modal">取消</button>
                            <button id="relevance-usergroup" type="button" class="btn newaddbtn" data-dismiss="modal">确定</button>
                        </div>
                    </div>
                </div>
</div>

<!--js代码-->
function Data(dataleft,dataright,lc,rc,add,remove,rightinput,leftinput){
   var that = this;
   that.dataleft = dataleft;
   that.dataright = dataright;
   that.lc = lc;
   that.rc = rc;
   that.add = add;
   that.remove = remove;
   that.rightinput = rightinput;
   that.leftinput = leftinput;
   //左边全选
   var leftAll = function(){
      for(var i=0;i<that.leftinput.length;i++){
         that.leftinput[i].checked=that.lc.checked
         if(that.lc.checked){
            that.add.disabled=false
         }else{
            that.add.disabled=true
         }
      }
   }
   //右边全选
   var rightAll = function(){
      for(var i=0;i<that.rightinput.length;i++){
         that.rightinput[i].checked=that.rc.checked;
         if(that.rc.checked){
            that.remove.disabled=false
         }else{
            that.remove.disabled=true
         }
      }
   }
   //判断左边全选
   var left = function(){
      for(var i=0;i<that.leftinput.length;i++){
         that.leftinput[i].onclick=function(){
            var count=0;
            for(var j=0;j<that.leftinput.length;j++){
               if(that.leftinput[j].checked){
                  count++;
                  that.add.disabled=false
               }
            }
            if(count==0){
               that.add.disabled=true;
            }
            that.lc.checked=(count==that.leftinput.length);
         }
      }
   }
   //判断右边全选
   var right = function(){
      for(var i=0;i<that.rightinput.length;i++){
         that.rightinput[i].onclick=function(){
            var count=0;
            for(var j=0;j<that.rightinput.length;j++){
               if(that.rightinput[j].checked){
                  count++;
                  that.remove.disabled=false
               }
            }
            if(count==0){
               that.remove.disabled=true;
            }
            that.rc.checked=(count==that.rightinput.length);
         }
      }
   }
   //被调用方法
   var getChecked = function(inputs){
      var checkedInputs = [];
      for(var i=0;i<inputs.length;i++){
         if(inputs[i].checked){
            checkedInputs.push(inputs[i].parentNode);
         }
      }
      return checkedInputs
   }
   //左边到右边
   var moveTo = function(){
      if(that.add.disabled==false){
         var checked = getChecked(that.leftinput);
         for(var i=0;i<checked.length;i++){
            that.dataright.appendChild(checked[i]);
         }
         if(!that.dataleft.hasChild){
            that.lc.checked=false;
            that.add.disabled=true;
         }
      }
   }
   //右边到左边
   var moveBack = function(){
      if(that.remove.disabled==false){
         var checked = getChecked(that.rightinput);
         for(var i=0;i<checked.length;i++){
            that.dataleft.appendChild(checked[i]);
         }
         if(!that.dataright.hasChild){
            that.rc.checked=false;
            that.remove.disabled=true;
         }
      }
   }
   //自动判断全选
   left();
   right();
//左边到右边
   add.onclick = function(){
      moveTo();
      left();
      right();
      leftAll();
      rightAll();
   }
//右边到左边
   remove.onclick = function(){
      moveBack();
      left();
      right();
      leftAll();
      rightAll();
   }
//左边全选
   lc.onclick = function(){
      leftAll()
   }
//右边全选
   rc.onclick = function(){
      rightAll()
   }
}
<!--调用js代码-->
new Data(document.getElementsByClassName("data-left2")[0],document.getElementsByClassName("data-right2")[0],document.getElementById("left-checked2"),document.getElementById("right-checked2"),document.getElementById("add2"),document.getElementById('remove2'),document.getElementsByClassName("data-right2")[0].getElementsByTagName("input"),document.getElementsByClassName("data-left2")[0].getElementsByTagName("input"));

CSS

.relative-style(){
  .data-left,
  .data-right{
    border-top:1px solid #d1dbe5;
    width: 188px;
    height: 268px;
    border: 1px solid #d1dbe5;
    border-left: none;
    border-right:none;
    overflow:auto;
  }
  .data-left div
  .data-right div,{
    height: 30px;
    position: relative;
    white-space: nowrap;
  }
  .data-left div::before,
  .data-right div::before{
    content: "____________________________";
    color: #DBDBDB;
    left: 11px;
    position: absolute;
    bottom: -9px;
  }
  .data-left div:hover,
  .data-right div:hover,{
    background-color:#e4e8f1;
  }
  .data-left div input,
  .data-right div input{
    cursor: pointer;
    top: -2px;
    left: 10px;
  }
  .data-left div span,
  .data-right div span{
    position: absolute;
    left: 24px;
    top: 0px;
    left: 28px;
    cursor: pointer;
  }
  #left-checked,
  #right-checked{
    width:14px;
    height:14px;
    left:2px;
  }
  .add-remove{
    width: 80px;
    height: 100px;
    position: absolute;
    left: 267px;
    top: 160px;
  }
  .add-remove button{
    width: 40px;
    height: 40px;
    margin-left: 20px;
  }
  .add-remove button:nth-of-type(2){
    margin-top: 2px;
  }
  .select-left-all{
    position: absolute;
    bottom: 14px;
    border: 1px solid #d1dbe5;
    width: 190px;
    height: 23px;
    left: 65px;
    font-size:12px;
    border-top: none;
  }
  .select-left-all input,
  .select-right-all input{
    margin-left: 10px !important;
    width: 16px;
    height: 16px;
  }
  .select-left-all span,
  .select-right-all span{
  position: absolute;
      top: 4px;
      left: 30px;
  }
  .select-right-all{ 
    position: absolute;
    width: 190px;
    height: 23px;
    bottom: 14px;
    border: 1px solid #d1dbe5;
    right: 45px;
    border-top: none;
    font-size:12px;
  }
}
}