jQuery的选择细胞水平或垂直地只

我已创建12×12的网格。并且每个单元格的id均为'_1'，'_2'等。例如。

<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。

在此先感谢

来源

2017-06-13 Ashok Shah

我会考虑设置一些全局变量来保存目标跨越的位置，然后对它们进行比较：

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"); 
     } 
    } 
});

来源

2017-06-13 03:29:50

谢谢德里克，你的代码工作正常。但我也可以从右到左选择。它应该从上到下或从左到右选择。 –

更新的答案和小提琴。我错过了那部分，但必要的变量已经存在。只需要为每个if语句添加一个比较。 https://jsfiddle.net/tsuppdot/5/ –

为了实现这一目标，首先你需要知道网格中的每个单元的Columns和Rows，什么方向运行目前与（Vertical或Horizontal）

要从你当前的标记的Columns和Rows，您可以通过使用id这样

var curID = parseInt($(this)[0].id.replace('_', '')); 
var curRow = Math.floor(curID/12); 
var curCol = curID % 12;

得到它10

您不需要决定curRow或curCol的结果是否等于row = 1或col = 12，因为您只需要知道mousemove事件是否在同一行中，还是在同一行中或山坳

然后，你需要设定的方向和最后一个单元行&山坳，你可以做这样的全局变量

var direction = ''; 
var lastRow = -1; 
var lastCol = -1;

而且在mousedown，mousemove每个事件设置的值， mouseup是否重新初始化值或将值设置为当前值，然后检查方向是否未设置，通过检查mousemove事件设置它是否在相同的列或行中（相同的列=垂直移动，相同行=水平移动），并将其设置为这样

if(direction === '') { 
    direction = lastRow == curRow ? 'H' : lastCol == curCol ? 'V' : ''; 
}

方向然后给高亮之前，再添验证，如果这意味着direction = 'V'您需要突出仅与same cur col with the last col细胞，并有cur row equals last row + 1 ，并用此次更新最新值

if((direction == 'H' && curRow == lastRow && curCol == lastCol + 1) || (direction == 'V' && curRow == lastRow + 1 && curCol == lastCol)) { 
    $(this).addClass("highlightE"); 
    lastRow = curRow; 
    lastCol = curCol; 
}

下面是最新的完整答案：JSFIDDLE

来源

2017-06-13 03:14:49 Kyojimaru

jQuery的选择细胞水平或垂直地只

回答

相关问题