前端开发之div实现table表格系列教程二：拖动表格draggable

查看效果

<style>
#table1{
    width:613px;
}
.kui-table {
    border: 1px dotted #ccc;
}
.kui-table .kui-td {
    height:32px;
    line-height:32px;
    font-size: 12px;
    border-color: #ccc;
    border-style: dotted;
    border-width: 0 0 1px 1px;
}
.kui-table .kui-td{
    background-color:#fff;
}
.kui-table .kui-td span {
  padding:0 4px;
  text-overflow:ellipsis;
  white-space:nowrap;
  overflow:hidden;
  width:100%;
}
.kui-table .kui-th,.kui-table .kui-td-rowno{
    height:32px;
    background-color: #efefef;
    background: -webkit-linear-gradient(top,#F9F9F9 0,#efefef 100%);
    background: -moz-linear-gradient(top,#F9F9F9 0,#efefef 100%);
    background: -o-linear-gradient(top,#F9F9F9 0,#efefef 100%);
    background: linear-gradient(to bottom,#F9F9F9 0,#efefef 100%);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#F9F9F9,endColorstr=#efefef,GradientType=0);
}
.kui-table .kui-tr.kui-odd,.kui-table .kui-tr.kui-odd .kui-td {
  background: #fafafa;
}
.kui-table .kui-tr.kui-tr-selected .kui-td {
  background: #ffe48d;
  color: #000000;
}

.kui-table .kui-tr:not(.kui-tr-selected):hover .kui-td {
  background: #eaf2ff;
  color: #000000;
  cursor: default;
}

.kui-table .kui-td-rowno{
    text-align:center;
}
.kui-table .kui-td-checkbox span,.kui-table .kui-td-rowno span{
    width:auto;/*让内容可以居中*/
}
</style>

<div id="table1" class="kui-table">
   <div class="kui-tr">
          <div class="kui-td kui-th kui-td-1" style="width: 50px; ">
                 <span>序号</span>
          </div>
          <div class="kui-td kui-th kui-td-2" style="width: 80px;">
                  <span>姓名</span>
          </div>
          <div class="kui-td kui-th kui-td-3" style="width: 80px;">
                  <span>性别</span>
          </div>
          <div class="kui-td kui-th kui-td-4" style="width: 150px;">
                 <span>联系电话</span>
           </div>
          <div class="kui-td kui-th kui-td-5" style="width: 250px;">
                  <span>地址</span>
          </div>
   </div>
   <div class="kui-tr">
          <div class="kui-td kui-td-rowno kui-td-1" style="width: 50px; ">
                 <span>1</span>
          </div>
          <div class="kui-td kui-td-2" style="width: 80px;">
                  <span>张三</span>
          </div>
          <div class="kui-td kui-td-3" style="width: 80px;">
                  <span>男</span>
          </div>
          <div class="kui-td kui-td-4" style="width: 150px;">
                 <span>13022222222</span>
           </div>
          <div class="kui-td kui-td-5" style="width: 250px;">
                  <span>浙江省杭州市区西湖区</span>
          </div>
   </div>
   <div class="kui-tr">
          <div class="kui-td kui-td-rowno kui-td-1" style="width: 50px; ">
                 <span>2</span>
          </div>
          <div class="kui-td kui-td-2" style="width: 80px;">
                  <span>李四</span>
          </div>
          <div class="kui-td kui-td-3" style="width: 80px;">
                  <span>男</span>
          </div>
          <div class="kui-td kui-td-4" style="width: 150px;">
                 <span>13033333333</span>
           </div>
          <div class="kui-td kui-td-5" style="width: 250px;">
                  <span>贵州省贵阳市南明区</span>
          </div>
   </div>
   <div class="kui-tr">
          <div class="kui-td kui-td-rowno kui-td-1" style="width: 50px; ">
                 <span>3</span>
          </div>
          <div class="kui-td kui-td-2" style="width: 80px;">
                  <span>王五</span>
          </div>
          <div class="kui-td kui-td-3" style="width: 80px;">
                  <span>女</span>
          </div>
          <div class="kui-td kui-td-4" style="width: 150px;">
                 <span>13055555555</span>
           </div>
          <div class="kui-td kui-td-5" style="width: 250px;">
                  <span>江苏省南京市玄武区</span>
          </div>
   </div>
   <div class="kui-tr">
          <div class="kui-td kui-td-rowno kui-td-1" style="width: 50px; ">
                 <span>4</span>
          </div>
          <div class="kui-td kui-td-2" style="width: 80px;">
                  <span>赵六</span>
          </div>
          <div class="kui-td kui-td-3" style="width: 80px;">
                  <span>男</span>
          </div>
          <div class="kui-td kui-td-4" style="width: 150px;">
                 <span>13066666666</span>
           </div>
          <div class="kui-td kui-td-5" style="width: 250px;">
                  <span>江苏省南京市玄武区</span>
          </div>
   </div>
</div>
<div id="info" style="height:30px;color:red;font-weight:blod;"></div>
<script>
     $(function(){
        var offsetX=0;
        var offsetY=0;
        var table=$k('#table1').table();
        table.draggable({
            onMoveStart: function (_drag, e) {
               $('#info').html('开始拖动');
            },
            onMove:function(_drag,e){
                offsetX+=(e.pageX - _drag.dragState.preX);
                offsetY+=(e.pageY - _drag.dragState.preY);
                $('#info').html('水平移动：'+offsetX+'px，垂直移动：'+offsetY+'px');
            },
            onMoveEnd:function(_drag,e){
                 $('#info').html('拖动结束');
            }
        });
     });
</script>