如何在當前行中拖動拖動開始和拖動結束之間的所有單元格，拖動只能在當前行中拖動

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/