如何避免垂直拖曳选择？

我在这里有一个动态表格。我完成了表格单元格的拖动选择，但需要防止垂直拖动选择。如何避免垂直拖动选择？我的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

如何避免垂直拖曳选择？

回答

相关问题