作品列表可拖拽

app/views/student_work/_evaluation_title.html.erb

@@ -1,4 +1,4 @@
-<table class="hwork-table-wrap" id="homework_table" onmouseenter="resizeable_table(3,4,10)">
+<table class="hwork-table-wrap" id="homework_table" onmouseenter="resizeable_table(3,4,11,11)">
   <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,16 +1,16 @@
-<table class="hwork-table-wrap" id="homework_table" onmouseenter="resizeable_table(3,4,10)">
+<table class="hwork-table-wrap" id="homework_table" onmouseenter="resizeable_table(2,4,11,11)">
   <tr class="b_grey hworkH30" style="border-bottom:1px solid #eaeaea;">
     <th class="hworkList30 hworkH30 pl5 pr5">序号</th>
     <th class="hworkList50">&nbsp;</th>
-    <th class="<%= @homework.homework_type == 2 ? 'hworkList80 pr10' : 'hworkList130 pr10'%>" style="text-align:left;">作品名称</th>
+    <th class="<%= @homework.homework_type == 2 ? 'hworkList80 pr10 hide-text' : 'hworkList130 pr10 hide-text'%>" style="text-align:left;">作品名称</th>
     <% if @homework.homework_type != 3 %>
-    <th class="<%=@homework.anonymous_comment == 1 ? 'hworkList100' : 'hworkList60'%> pr10">
+    <th class="<%=@homework.anonymous_comment == 1 ? 'hworkList100' : 'hworkList60'%> pr10 hide-text">
       <%= link_to "姓名",@show_all ? student_work_index_path(:homework => @homework.id,:order => "lastname", :sort => @score, :name => @name, :group => @group) : "javascript:void(0)",:class => "c_dark f14 fb fl #{@homework.anonymous_comment == 1 ? 'ml35' : 'ml18'}" ,:remote => true%>
       <% if @show_all && @order == "lastname"%>
           <%= link_to "", student_work_index_path(:homework => @homework.id,:order => "lastname", :sort => @score, :name => @name, :group => @group) ,:class => "#{@score == 'desc' ? 'st_up' : 'st_down'} mt10" ,:remote => true%>
       <% end%>
     </th>
-    <th class="<%=@homework.anonymous_comment == 1 ? 'hworkList90' : 'hworkList80'%> pr10">
+    <th class="<%=@homework.anonymous_comment == 1 ? 'hworkList90' : 'hworkList80'%> pr10 hide-text">
       <%= link_to "学号",@show_all ? student_work_index_path(:homework => @homework.id,:order => "student_id", :sort => @score, :name => @name, :group => @group) : "javascript:void(0)",:class => "c_dark f14 fb fl ml30" ,:remote => true%>
       <% if @show_all && @order == "student_id"%>
           <%= link_to "", student_work_index_path(:homework => @homework.id,:order => "student_id", :sort => @score, :name => @name, :group => @group) ,:class => "#{@score == 'desc' ? 'st_up' : 'st_down'} mt10" ,:remote => true%>

app/views/student_work/_evaluation_un_work.html.erb

@@ -12,7 +12,7 @@
       </div>
     </td>
       <% if @homework.homework_type != 3 %>
-        <td class="<%=@homework.anonymous_comment == 1 ? 'hworkStName100' : 'hworkStName'%> pr10 student_work_<%= student_work.id%>" title="<%= student_work.user.show_name%>" onclick="show_student_work('<%= student_work_path(student_work)%>');" style="cursor:pointer;">
+        <td class="<%=@homework.anonymous_comment == 1 ? 'hworkStName100' : 'hworkStName'%> pr10 float-none student_work_<%= student_work.id%>" title="<%= student_work.user.show_name%>" onclick="show_student_work('<%= student_work_path(student_work)%>');" style="cursor:pointer;">
           <%= student_work.user.show_name%>
         </td>
         <td class="<%=@homework.anonymous_comment == 1 ? 'hworkStID90' : 'hworkStID'%> pr10 float-none student_work_<%= student_work.id%>" title="<%= student_work.user.user_extensions.nil? ? "--" : student_work.user.user_extensions.student_id%>" onclick="show_student_work('<%= student_work_path(student_work)%>');" style="cursor:pointer;">

public/javascripts/resizeable_table.js

@@ -2,7 +2,7 @@
  * Created by ttang on 2016/5/24.
  */
     $(document).ready(function(){
-       resizeable_table = function(colS,colE,padding){
+       resizeable_table = function(colS,colE,p1,p2){
            var headerTds = document.getElementById("homework_table").rows[0].cells;
            var mousedown = false;
            var resizeable = false;
@@ -24,6 +24,7 @@
                    screenXStart = evt.screenX;
                    tdWidth = targetTd.offsetWidth;
                    tdWidth2 = targetTd.nextElementSibling.offsetWidth;
+                   totalWidth = tdWidth + tdWidth2;
                }
            }
            function onmousemove(event){
@@ -31,18 +32,22 @@
                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");
+                   var width = (tdWidth + (evt.screenX - screenXStart)) - p1 + "px";//计算后的新的宽度
+                   var width2 = (tdWidth2 - (evt.screenX - screenXStart)) - p2 + "px";
+                   console.log(width, width2, totalWidth);
+                   if (parseInt(width)<0  || parseInt(width2)<58 || tdWidth > totalWidth || tdWidth2 > totalWidth){
+                       tartgetTd = null;
+                       resizeable = false;
+                       mousedown = false;
                    }else{
                        targetTd.style.width = width;
                        targetTd.nextElementSibling.style.width = width2;
+                       document.onmouseup = function(event){
+                           tartgetTd = null;
+                           resizeable = false;
+                           mousedown = false;
+                           document.body.style.cursor='default';
+                       }
                    }
                }else{
                    var trObj = tblObj.rows[0];
@@ -50,10 +55,6 @@
                        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';

public/stylesheets/courses.css

@@ -104,7 +104,7 @@ a.hworkSearchIcon:hover {background:url(../images/nav_icon.png) -49px -1px no-re
 
 /*20160520作品列表table*/
 .hwork-table-wrap {width:720px; border-collapse:collapse; vertical-align:middle; table-layout:fixed;}
-.hwork-table-wrap th {font-size:14px; color:#2d2d2d;}
+.hwork-table-wrap th {font-size:14px; color:#2d2d2d; border:1px solid #e1e1e1;}
 
 /*作业信息*/
 .mt-2 {margin-top:-2px;}

public/stylesheets/public.css

@@ -56,6 +56,7 @@ h4{ font-size:14px; color:#3b3b3b;}
 .flow_hidden{ width:300px;overflow:hidden; white-space: nowrap; text-overflow:ellipsis;}
 .white_space{white-space:nowrap;}
 .pr {position:relative;}
+.hide-text {overflow:hidden; white-space:nowrap;}
 
 /* Spacing */
 .ml2{ margin-left:2px;}