Question

描述

我创建了一个12x12的网格。并且每个单元格的id为＆＃39; _1＆＃39;，＆＃39; _2＆＃39;等。例如。

<span id="_1">L</span>
<span id="_2">B</span>

我使用以下代码突出显示拖动时间。

function initWordSearch() {
    var active = false;

    $("#game-section span").mousedown(function(ev) {
        active = true;
        $(".highlightE").removeClass("highlightE"); // clear previous selection
        ev.preventDefault(); // this prevents text selection from happening
        $(this).addClass("highlightE");
    });

    $("#game-section span").mousemove(function(ev) {
        if (active) {
        console.log($(this).text());
        $(this).addClass("highlightE");
        }
    });

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

}

$(document).ready(function(e) {
    initWordSearch();
});

实现

目前，我移动鼠标的位置被选中。 我想从左到右水平选择框，或者从上到下垂直选择框。

这是当前进度的jsfiddle link。

提前致谢

Answer 1

我会考虑设置一些全局变量来保持目标跨度的位置，然后比较它们：

JS Fiddle

有关更多解释，请参阅JS注释

  // Set global variables for comparisons
  var active, start, startX, startY, axis;

  $("#game-section span").mousedown(function(ev) {
    start = $(this)
    active = true;
    $(".highlightE").removeClass("highlightE"); // clear previous selection
    ev.preventDefault(); // this prevents text selection from happening
    start.addClass("highlightE");

    // Set global variables
    var position = start.position()
    startX = position.left;
    startY = position.top;
  });

  $("#game-section span").mousemove(function(ev) {
    // Get direction of the first highlighted span to compare
    if(!$(this).hasClass('highlightE') && active) {
      var position = $(this).position();
      var x = position.left;
      var y = position.top;

      // Only decide which way the highlights should go on the first one highlighted
      if(!axis) {
        x === startX ? axis = 'y' : axis = 'x';
      }

      // If axis is equal to y, it should go sideways
      if(axis === 'y' && x === startX && y > startY) {
        $(this).addClass("highlightE");
      }

      // If its x, it should go up and down
      if(axis === 'x' && y === startY && x > startX) {
        $(this).addClass("highlightE");
      }
    }
 });

Answer 2

要实现这一点，首先您需要知道网格中每个单元格的Columns和Rows，以及当前使用的操作方向（Vertical或{{1 }}）

要从当前标记中获取Horizontal和Columns，您可以使用此类Rows来获取

id

您无需确定var curID = parseInt($(this)[0].id.replace('_', '')); var curRow = Math.floor(curID / 12); var curCol = curID % 12;或curRow的结果是否等于0 = row = 1或col = 12，因为您需要知道是否{{1}事件，它是在同一行还是col

然后你需要设置方向和最后一个单元格行＆amp; col，你可以在全局变量

中这样做

curCol

并在mousemove，var direction = ''; var lastRow = -1; var lastCol = -1;，mousedown的每个事件中设置值是重新初始化值还是将值设置为当前值，然后检查方向是否为没有设置，通过检查mousemove事件来设置它，它是在相同的col或行中（相同col =垂直移动，同一行=水平移动），并将其设置为这样的方向

mouseup

然后在提供突出显示之前，添加另一个验证，如果mousemove表示您只需要突出显示包含if(direction === '') { direction = lastRow == curRow ? 'H' : lastCol == curCol ? 'V' : ''; }的单元格并拥有direction = 'V'，并更新最后一个值与目前这样的

same cur col with the last col

以下是完全更新的答案：JSFIDDLE

jQuery仅水平或垂直选择单元格

2 个答案: