Question

我这里有一个动态表。我完成了表格单元格的拖动选择，但需要防止垂直拖动选择。如何避免垂直拖动选择？

我的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
});

Answer 1

首先，在较新版本的jQuery中不推荐使用bind，而是使用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

<强>更新

我已更新您的代码。做了一些优化并添加了另一个解决方案，它只在mouseenter事件处理程序中添加了mouseover事件处理程序（而不是mousedown）。我还添加了代码以清除以前的选择。

以下是最终代码和相应的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");
    }
}

如何避免垂直拖动选择？

1 个答案: