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的選擇細胞水平或垂直地只

回答

相關問題