table可拖拽

app/views/student_work/_evaluation_title.html.erb

@@ -1,4 +1,4 @@
-<table class="hwork-table-wrap">
+<table class="hwork-table-wrap" id="homework_table" onmouseenter="resizeable_table(3,4,10)">
   <tr class="b_grey hworkH30" style="border-bottom:1px solid #eaeaea;">
     <th class="hworkList30 hworkH30 pl5 pr5">序号</th>
     <th class="hworkList50">&nbsp;</th>

app/views/student_work/_evaluation_un_title.html.erb

@@ -1,4 +1,4 @@
-<table class="hwork-table-wrap">
+<table class="hwork-table-wrap" id="homework_table" onmouseenter="resizeable_table(3,4,10)">
   <tr class="b_grey hworkH30" style="border-bottom:1px solid #eaeaea;">
     <th class="hworkList30 hworkH30 pl5 pr5">序号</th>
     <th class="hworkList50">&nbsp;</th>
@@ -17,7 +17,7 @@
       <% end%>
     </th>
     <% elsif @homework.homework_type == 3 && @homework.homework_detail_group.base_on_project == 1 %>
-        <th class="<%=@homework.anonymous_comment == 1 ? 'hworkList220' : 'hworkList160'%>">
+        <th class="<%=@homework.anonymous_comment == 1 ? 'hworkList210' : 'hworkList160'%>">
           <span class="c_dark f14 fb">关联项目</span>
         </th>
     <% end %>

app/views/student_work/index.html.erb

@@ -1,5 +1,6 @@
 <% content_for :header_tags do %>
 <%= javascript_include_tag "/assets/codemirror/codemirror_python_ruby_c"  %>
+<%= javascript_include_tag "resizeable_table"  %>
 <%= stylesheet_link_tag "/assets/codemirror/codemirror" %>
 <% end %>
 

public/javascripts/resizeable_table.js

@@ -0,0 +1,76 @@
+/**
+ * Created by ttang on 2016/5/24.
+ */
+    $(document).ready(function(){
+       resizeable_table = function(colS,colE,padding){
+           var headerTds = document.getElementById("homework_table").rows[0].cells;
+           var mousedown = false;
+           var resizeable = false;
+           var targetTd;
+           var screenXStart =0;
+           var tdWidth = 0;
+           var headerWidth = 0;
+           var tblObj = document.getElementById("homework_table");
+           var tblWidth = tblObj.offsetWidth;
+           for(var i = colS;i<colE;i++){
+               addListener(headerTds[i],"mousedown",onmousedown);
+               addListener(headerTds[i],"mousemove",onmousemove);
+           }
+
+           function onmousedown(event){
+               if (resizeable == true){
+                   var evt =event||window.event;
+                   mousedown = true;
+                   screenXStart = evt.screenX;
+                   tdWidth = targetTd.offsetWidth;
+                   tdWidth2 = targetTd.nextElementSibling.offsetWidth;
+               }
+           }
+           function onmousemove(event){
+               var evt =event||window.event;
+               var srcObj = getTarget(evt);
+               var offsetX = evt.offsetX || (evt.clientX - srcObj.getBoundingClientRect().left);//这个比较关键，解决了Firefox无offsetX属性的问题
+               if (mousedown == true){
+                   var width = (tdWidth + (evt.screenX - screenXStart)) - 10 + "px";//计算后的新的宽度
+                   var width2 = (tdWidth2 - (evt.screenX - screenXStart)) - 10 + "px";
+                   console.log(width, width2);
+                   if (width<60){
+                       targetTd.style.width = "60px";
+                       console.log("width<60");
+                   }else if(width2<60){
+                       targetTd.nextElementSibling.style.width2 = "60px";
+                       console.log("width2<60");
+                   }else{
+                       targetTd.style.width = width;
+                       targetTd.nextElementSibling.style.width = width2;
+                   }
+               }else{
+                   var trObj = tblObj.rows[0];
+                   if(srcObj.offsetWidth - offsetX <=4){//实际改变本单元格列宽
+                       targetTd=srcObj;
+                       resizeable = true;
+                       srcObj.style.cursor='col-resize';//修改光标样式
+                   }else if(offsetX <=4 && srcObj.cellIndex > 0){//实际改变前一单元格列宽，但是表格左边框线不可拖动
+                       targetTd=trObj.cells[srcObj.cellIndex - 1];
+                       resizeable = true;
+                       srcObj.style.cursor='col-resize';
+                   }else{
+                       resizeable = false;
+                       srcObj.style.cursor='default';
+                   }
+               }
+           }
+           document.onmouseup = function(event){
+               tartgetTd = null;
+               resizeable = false;
+               mousedown = false;
+               document.body.style.cursor='default';
+           }
+           function getTarget(evt){
+               return evt.target || evt.srcElement;
+           }
+           function addListener(element,type,listener,useCapture){
+               element.addEventListener?element.addEventListener(type,listener,useCapture):element.attachEvent("on" + type,listener);
+           }
+       }
+    });

public/stylesheets/courses.css

@@ -59,7 +59,7 @@ a:hover.news_foot{ color:#787b7e; border:1px solid #d4d4d4;}
 .hworkList100 {width:100px; text-align:center;}
 .hworkList130 {width:130px; text-align:center;}
 .hworkList160 {width:160px; text-align:center;}
-.hworkList220 {width:220px; text-align:center;}
+.hworkList210 {width:210px; text-align:center;}
 .hworkList260 {width:260px; text-align:left;}
 .codeList{ float:right; font-size:12px; color:#484848; padding:0px 3px;  width:714px; margin-bottom:10px; }
 .hworkName {width:80px; float:left; line-height:18px;}
@@ -103,7 +103,7 @@ a.hworkSearchIcon:hover {background:url(../images/nav_icon.png) -49px -1px no-re
 .pr10{padding-right: 10px;}
 
 /*20160520作品列表table*/
-.hwork-table-wrap {width:720px; border-collapse:collapse; vertical-align:middle;}
+.hwork-table-wrap {width:720px; border-collapse:collapse; vertical-align:middle; table-layout:fixed;}
 .hwork-table-wrap th {font-size:14px; color:#2d2d2d;}
 
 /*作业信息*/
@@ -1252,7 +1252,7 @@ a:hover.blueCir{ background:#3598db; color:#fff;}
 .tac {text-align:center;}
 .proHelp {background:url(/images/course/hwork_icon.png) -5px -124px no-repeat; display:inline-block; width:15px; height:15px; display:inline-block;}
 .hworkPrName {width:160px; overflow:hidden; white-space: nowrap; text-overflow:ellipsis; float:left; height:65px; line-height:65px; vertical-align:middle; font-size:12px; color:#888888; text-align:center;}
-.hworkPrName2 {width:220px; overflow:hidden; white-space: nowrap; text-overflow:ellipsis; float:left; height:65px; line-height:65px; vertical-align:middle; font-size:12px; color:#888888; text-align:center;}
+.hworkPrName2 {width:210px; overflow:hidden; white-space: nowrap; text-overflow:ellipsis; float:left; height:65px; line-height:65px; vertical-align:middle; font-size:12px; color:#888888; text-align:center;}
 .mr150 {margin-right:150px;}
 .relatePInfo {text-align: left; position:absolute; background-color:#ffffff; padding:3px 8px; white-space:nowrap; box-shadow:0px 2px 8px rgba(146, 153, 169, 0.5); z-index:999; color:#585858; cursor:pointer; display:none;}
 .captainName {max-width:75px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; display: inline-block;}