查看效果 <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>
|