如何避免垂直拖曳選擇？

我在這裏有一個動態表格。我完成了表格單元格的拖動選擇，但需要防止垂直拖動選擇。如何避免垂直拖動選擇？我的fiddle。如何避免垂直拖曳選擇？

代碼：

var isMouseDown = false; 
$("#mytable td").mousedown(function() { 
    isMouseDown = true; 
    $(this).toggleClass("highlighted"); 
    return false; // prevent text selection 
}).mouseover(function() { 
     if (isMouseDown) { 
      $(this).toggleClass("highlighted"); 
     } 
}).bind("selectstart", function() { 
     return false; // prevent text selection in IE 
});

來源

2014-08-28 kannan D.S

起初，bind是jQuery中的較新版本過時，使用on代替。

第二，您可以將parent保存在mousedown事件中，並在mouseover中檢查它。通過這種方式，您可以檢查td是否與tr相同。更新後的代碼可能是這樣的：

var isMouseDown = false, parent; 

$("#mytable td").mousedown(function() { 
    var $this = $(this); 
    isMouseDown = true; 
    parent = $this.closest('tr').get(0); 
    $this.toggleClass("highlighted"); 
    return false; // prevent text selection 
}).mouseover(function() { 
    var $this = $(this); 
    if (isMouseDown && parent === $this.closest('tr').get(0)) { 
     $this.toggleClass("highlighted"); 
    } 
}).on("selectstart", function() { 
    return false; // prevent text selection in IE 
});

JSFiddle

更新：

我已經更新了你的代碼。做了一些優化並添加了另一個解決方案，它只在mousedown事件處理程序中添加了mouseenter事件處理程序（而不是mouseover）。此外，我添加了代碼以清除之前的選擇。

下面是最終的代碼和對應的JSFiddle：

var isMouseDown = false, 
    $cells = $('#mytable td'); 

$cells.on('mousedown', function() { 
    $cells.removeClass('highlighted'); // Clear previous selection 
    isMouseDown = true; 

    $(this) 
     .toggleClass('highlighted') 
     .siblings('td') 
     .on('mouseenter', onMouseEnter); // Add mouseenter event handler on siblings 

    return false; 
}).on('mouseup', function() { 
    $(this).siblings('td').off('mouseenter'); // Remove mouseenter event handler from siblings 
}).on('selectstart', function() { 
    return false; 
}); 

// The onMouseEnter handler 
function onMouseEnter() { 
    if (isMouseDown) { 
     $(this).toggleClass("highlighted"); 
    } 
}

來源

2014-08-28 06:28:33

如何避免垂直拖曳選擇？

回答

相關問題