左左右右

.main{display: flex;}
p{text-align: center;}
.choice{color: red;background: black;}

<div class="main">
    <div id="left" class="wo">
      <ul>
        <li>喝了咯2</li>
        <li>喝了咯3</li>
      </ul>
      <p></p>
    </div>
    <div id="control">
      <ul>
        <li class="left">></li>
        <li class="left_all">>></li>
        <li class="right"><</li>
        <li class="right_all"><<</li>
      </ul>
    </div>
    <div id="right" class="wo">
      <ul>
        <li>喝了咯1</li>
        <li>喝了咯5</li>
      </ul>
      <p></p>
    </div>
  </div>

    var els_wo = document.querySelectorAll(".wo");
    for(var i=0;i<els_wo.length;i++){
        els_wo[i].addEventListener("click",function(e){
            var el=e.target||e.srcElement;
            if(el.tagName=="LI"){
                if(el.className=="choice"){
                    el.className="";
                }else{
                    el.className="choice";
                }
            }
        },false);
    }
    document.querySelector("#control").addEventListener("click",function(e){
        if(e.srcElement.tagName!="LI") return;
        switch (e.srcElement.className){
            case "left":
                var els = document.querySelectorAll("#right li");
                for (var i = 0; i < els.length; i++) {
                    if(els[i].className=="choice"){
                        var temp = els[i].cloneNode(true);
                            temp.removeAttribute("class");
                        document.querySelector("#left ul").appendChild(temp);
                        els[i].parentNode.removeChild(els[i]);
                    }
                };
                break;
            case "right":
                var els = document.querySelectorAll("#left li");
                for (var i = 0; i < els.length; i++) {
                    if(els[i].className=="choice"){
                        var temp = els[i].cloneNode(true);
                            temp.removeAttribute("class");
                        document.querySelector("#right ul").appendChild(temp);
                        els[i].parentNode.removeChild(els[i]);
                    }
                };
                break;
            case "left_all":
                var el = document.querySelector("#right ul");
                for (var i = 0; i < el.children.length; i++) {
                    el.children[i].removeAttribute("class");
                };
                document.querySelector("#left ul").innerHTML=document.querySelector("#left ul").innerHTML+el.innerHTML;
                el.innerHTML="";
                break;
            case "right_all":
                var el = document.querySelector("#left ul");
                for (var i = 0; i < el.children.length; i++) {
                    el.children[i].removeAttribute("class");
                };
                document.querySelector("#right ul").innerHTML=document.querySelector("#right ul").innerHTML+el.innerHTML;
                el.innerHTML="";
                break;
        }
    },false);