js表格拖拽

Posted 2020-10-30 aSnow

html部分

<div id="chenkbox">
<div id="tableSort">
    <ol>
          <li> 序列 </li>
          <li> 名称 </li>
          <li> 数量 </li>
          <li> 单价(Q点) </li>
          <li> 总计(Q点) </li>
     </ol>
    <ul>
          <li>1</li>
          <li>农场话费A</li>
          <li>2</li>
          <li>50</li>
          <li>100</li>
        </ul>
    <ul>
          <li>2</li>
          <li>飞车道具C</li>
          <li>1</li>
          <li>80</li>
          <li>80</li>
        </ul>
    <ul>
          <li>3</li>
          <li>空间K</li>
          <li>1</li>
          <li>120</li>
          <li>120</li>
        </ul>
    <ul>
          <li>4</li>
          <li>农场狗粮C</li>
          <li>4</li>
          <li>60</li>
          <li>240</li>
        </ul>
    <ul>
          <li>5</li>
          <li>音速种子</li>
          <li>2</li>
          <li>110</li>
          <li>220</li>
        </ul>
    <ul>
          <li>6</li>
          <li>农场化肥D</li>
          <li>5</li>
          <li>60</li>
          <li>300</li>
        </ul>
    <ul>
          <li>7</li>
          <li>AVA装扮C</li>
          <li>1</li>
          <li>300</li>
          <li>300</li>
        </ul>
    <ul>
          <li>8</li>
          <li>三国道具C</li>
          <li>15</li>
          <li>60</li>
          <li>900</li>
        </ul>
    <ul>
          <li>9</li>
          <li>DNF道具B</li>
          <li>4</li>
          <li>300</li>
          <li>1200</li>
        </ul>
    <ul>
          <li>10</li>
          <li>农场化肥H</li>
          <li>6</li>
          <li>80</li>
          <li>120</li>
        </ul>
    <ul>
          <li>11</li>
          <li>农场化肥B</li>
          <li>1</li>
          <li>80</li>
          <li>80</li>
        </ul>
    <ul>
          <li>12</li>
          <li>Q宠元宝</li>
          <li>100</li>
          <li>1</li>
          <li>100</li>
        </ul>
    <ul>
          <li>13</li>
          <li>三国道具K</li>
          <li>9</li>
          <li>20</li>
          <li>180</li>
        </ul>


 <div id="box"></div>
  </div>
</div>

css部分

* {
    margin: 0;
    padding: 0;
}
body {
    font-family: "microsoft yahei";
    background-color: #eee;
    user-select: none;
}
#chenkbox {
    margin: 100px auto;
    width: 800px;
    position: relative;

    
}
#tableSort{
    border-right:#0066cc 1px solid;
    border-bottom: #0066cc 1px solid;
    height: 434px;
}

li{
    list-style: none;
}
#box {
    position: absolute;
    display: none;
    background: #fff;
    text-align: center;
    top: 0;
    background-color: #000;
    background-color: rgba(0,0,0,0.8);
    color: #fff;
    height: 100%;
    cursor: move;
}
#box p {
    line-height: 2;
}
#chenkbox ol{
    height: 30px;
    line-height: 30px;
}
#chenkbox ul{
    width: 100%;
    height: 30px;
    cursor: move;
    line-height: 30px;
    
}
#chenkbox li{
    width: 19.87%;
    float: left;
    
    border-top: #0066cc 1px solid;
   border-left: #0066cc 1px solid;
   text-align: center;

}

js部分

var ochek=document.getElementById("chenkbox");
    var ul=document.getElementsByTagName(\'ul\');
     var  box=document.getElementById("box");
     var arr=[];
    for(var i=0;i<ul.length;i++){
        ul[i].onmousedown=function(){
           var e=e||window.event;
           var w=this.offsetWidth;
           var h=this.offsetHeight;
           var t=ochek.offsetTop;
           var st=this.offsetTop;
           var ss=this.innerHTML;
             _this=this;//鼠标按下时的ul
           box.innerHTML=ss;
           box.style.display="block";
           box.style.width=w+"px";
           box.style.height=h+"px";
           box.style.top=st+"px";
          for(var j=0;j<ul.length;j++){
                  arr.push(ul[j].offsetTop);//所有行的top值
          }
           document.onmousemove=function(e){
                      var e=e||window.event;
                      box.style.top=e.clientY-t+"px";  //移动时的top值 
                  }
                   document.onmouseup=function(e){
                     var e=e||window.event;
                     var index=\'\';
                      for(var j=0;j<arr.length;j++){
                          if(arr[j]<e.clientY-t){//得到当移动的top值大于ul的top值时的i
                              index=j;  
                          }
                      }  
                     _this.innerHTML=ul[index].innerHTML;//鼠标按下时的ul的innerHTML等于移动到的ul的innerHTML
                     ul[index].innerHTML= box.innerHTML;//移动到的ul的innerHTML等于box中的innerHTML
                     arr.splice(0,arr.length);//清空数组
                      box.style.display="none";
                     box.innerHTML=\'\';    
                     ul[i].onmousedown=null;
                     document.onmousemove=null;

                  }
        }
    }