如何在当前行中拖动拖动开始和拖动结束之间的所有单元格，拖动只能在当前行中拖动

Question

如何在当前行中拖动拖动开始和拖动结束之间的所有单元格，只能拖动当前行选择行，需要防止垂直拖拽

检查我的小提琴http://jsfiddle.net/kannankds/3xakkja9/3/

$(function() { 
    var isMouseDown = false; 
    $("#mytable td") 
     .mousedown(function() { 
      isMouseDown = true; 
      $(this).toggleClass("hilight"); 
      var $this = $(this); 
      parent = $this.closest('tr').get(0); 
      return false; // prevent text selection 
     }) 
     .mouseover(function() { 
      if (isMouseDown) { 
       $(this).toggleClass("hilight"); 
      } 
     }); 
    $(document) 
     .mouseup(function() { 
      isMouseDown = false; 
     }); 
}); 

Answer 1

http://jsfiddle.net/3xakkja9/7/

添加一些修改里约热内卢的代码

$(function() { 
    var isMouseDown = false; 
    var currentTr; 

    $("#mytable td") 
     .mousedown(function() { 
     isMouseDown = true; 

     var $this = $(this); 
     currentTr = $this.parent(); //## new 

     clear(currentTr) //## clear all td hilight befor drag start 

     $this.addClass("hilight"); 


     return false; // prevent text selection 
    }) 
     .mouseover(function() { 
     if (currentTr.get(0) != $(this).parent().get(0)) { //## new 
      return false; 
     } 

     if (isMouseDown) { 
      $(this).addClass("hilight"); 
     } 
    }); 

    $(document) 
     .mouseup(function() { 
     isMouseDown = false; 
    }); 
}); 

function clear($tr) { 
    $tr.find('td').removeClass('hilight') 
} 

Answer 2

检查了这一点。这个想法只是记住mousedown开始的行，并查看它是否与鼠标悬停中的当前行相同。

$(function() { 
    var isMouseDown = false; 
    var currentTr;  
    $("#mytable td") 
    .mousedown(function() { 
     isMouseDown = true; 

     $(this).toggleClass("hilight"); 
     var $this = $(this); 
     currentTr = $this.closest('tr').get(0); 
     return false; // prevent text selection 
    }) 
    .mouseover(function() { 
     if(currentTr != $(this).closest('tr').get(0)){ 
      return false; 
     } 

     if (isMouseDown) { 
     $(this).toggleClass("hilight"); 
     } 
      }); 

    $(document) 
    .mouseup(function() { 
     isMouseDown = false; 
    }); 
}); 

http://jsfiddle.net/3xakkja9/5/