jQueryでドラッグした後、テーブル内の範囲内のセルを選択

Question

テーブル内のセルを選択するための簡単な方法を構築しようとしています。選択は、Excelでの動作と同様に、マウスでドラッグする開始点と終了点によって決まります。

現在のソリューションは、左から右、上から下へドラッグする限り機能します。私は座標を並べ替えることでこれに対抗しようとしましたが、それは助けになりませんでした。代わりに、ドラッグする方向（水平または垂直）で常に2つのセルが選択されるようになりました。私は理由を理解できないようだ。

主なアイデアである：

• れるonmousedown：行を使用して、セルの座標を開始ストアと細胞idnex
• のonmouseover/onmouseleave：すべてのイベントに関する
• セルの座標を終了店、行をダウンスライスと彼らの子供たちは、座標によって与えられた正しい範囲を得るために

私は思考の誤りを作り出しているように感じますが、私はどちらかを見ません。修正する

function markSelection(selection) { 
 
    // Sort coordinates (start-end point) numerically 
 
    selection["x"] = selection["x"].sort(sortNumbers); 
 
    selection["y"] = selection["y"].sort(sortNumbers); 
 

 
    // Only get relevant rows within range 
 
    const rows = $("#pixels>tbody tr").slice(selection["y"][0], selection["y"][1] + 1); 
 
    $("#pixels>tbody tr td").removeClass("selected"); 
 
    let cells = $(); 
 
    // In each relevant row, get the relevant cells 
 
    rows.each(function(i, el) { 
 
    cells = cells.add($(el).children("td").slice(selection["x"][0], selection["x"][1] + 1)); 
 
    }); 
 
    cells.addClass("selected"); 
 
} 
 

 
function sortNumbers(a, b) { 
 
    return a - b; 
 
} 
 

 
let isDragging = false; 
 
let selection = {}; 
 

 
$("#pixels").on("mousedown", "td", function() { 
 
    // Start dragging 
 
    isDragging = true; 
 

 
    const $this = $(this); 
 
    selection["x"] = [$this.index(), $this.index()]; 
 
    selection["y"] = [$this.parent("tr").index(), $this.parent("tr").index()]; 
 
    markSelection(selection); 
 
}).on("mouseover", "td", function() { 
 
    if (isDragging) { 
 
    const $this = $(this); 
 
    selection["x"][1] = $this.index(); 
 
    selection["y"][1] = $this.parent("tr").index(); 
 
    markSelection(selection); 
 
    } 
 
}).on("mouseup", "td", function() { 
 
    // End dragging 
 
    isDragging = false; 
 

 
    const $this = $(this); 
 
    selection["x"][1] = $this.index(); 
 
    selection["y"][1] = $this.parent("tr").index(); 
 
    markSelection(selection); 
 
}).on("mouseleave", function() { 
 
    // End dragging 
 
    isDragging = false; 
 
});

#pixels { 
 
    border-collapse: collapse; 
 
} 
 

 
#pixels td { 
 
    border: 1px solid black; 
 
    width: 64px; 
 
    height: 64px; 
 
} 
 

 
#pixels td.selected { 
 
    outline: 3px solid red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="pixels"> 
 
    <tbody style="background-color: rgb(255, 255, 255);"> 
 
    <tr> 
 
     <td style="border-color:#000000;"></td> 
 
     <td style="border-color:#000000;"></td> 
 
     <td style="border-color:#000000;"></td> 
 
     <td style="border-color:#000000;"></td> 
 
     <td style="border-color:#000000;"></td> 
 
    </tr> 
 
    <tr> 
 
     <td style="border-color:#000000;"></td> 
 
     <td style="border-color:#000000;"></td> 
 
     <td style="border-color:#000000;"></td> 
 
     <td style="border-color:#000000;"></td> 
 
     <td style="border-color:#000000;"></td> 
 
    </tr> 
 
    <tr> 
 
     <td style="border-color:#000000;"></td> 
 
     <td style="border-color:#000000;"></td> 
 
     <td style="border-color:#000000;"></td> 
 
     <td style="border-color:#000000;"></td> 
 
     <td style="border-color:#000000;"></td> 
 
    </tr> 
 
    <tr> 
 
     <td style="border-color:#000000;"></td> 
 
     <td style="border-color:#000000;"></td> 
 
     <td style="border-color:#000000;"></td> 
 
     <td style="border-color:#000000;"></td> 
 
     <td style="border-color:#000000;"></td> 
 
    </tr> 
 
    <tr> 
 
     <td style="border-color:#000000;"></td> 
 
     <td style="border-color:#000000;"></td> 
 
     <td style="border-color:#000000;"></td> 
 
     <td style="border-color:#000000;"></td> 
 
     <td style="border-color:#000000;"></td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Answer 1

一つの方法は、ソートする前に、あなたの座標の配列のコピーを作成してソートし、行とセルをスライスするコピー結果を使用することです。

別代わりに、元のアレイの

ソートのソート/終了を開始取得するMath.max & Math.minを使用することになる動きは上方またはである場合、開始点と終了点を切り替えることによって、問題を引き起こしているものです私は非常に混乱しています

function markSelection(selection) { 
 
    // make copies before sorting 
 
    const coords = { 
 
    x: selection["x"].slice().sort(sortNumbers), 
 
    y: selection["y"].slice().sort(sortNumbers) 
 
    } 
 
    // Only get relevant rows within range 
 
    const rows = $("#pixels>tbody tr").slice(coords["y"][0], coords["y"][1] + 1); 
 
    $("#pixels>tbody tr td").removeClass("selected"); 
 
    let cells = $(); 
 
    // In each relevant row, get the relevant cells 
 
    rows.each(function(i, el) { 
 
    cells = cells.add($(el).children("td").slice(coords["x"][0], coords["x"][1] + 1)); 
 
    }); 
 
    cells.addClass("selected"); 
 
} 
 

 
function sortNumbers(a, b) { 
 
    return a - b; 
 
} 
 

 
let isDragging = false; 
 
let selection = {}; 
 

 
$("#pixels").on("mousedown", "td", function() { 
 
    // Start dragging 
 
    isDragging = true; 
 

 
    const $this = $(this); 
 
    selection["x"] = [$this.index(), $this.index()]; 
 
    selection["y"] = [$this.parent("tr").index(), $this.parent("tr").index()]; 
 
    markSelection(selection); 
 
}).on("mouseover", "td", function() { 
 
    if (isDragging) { 
 
    const $this = $(this); 
 
    selection["x"][1] = $this.index(); 
 
    selection["y"][1] = $this.parent("tr").index(); 
 
    markSelection(selection); 
 
    } 
 
}).on("mouseup", "td", function() { 
 
    // End dragging 
 
    isDragging = false; 
 

 
    const $this = $(this); 
 
    selection["x"][1] = $this.index(); 
 
    selection["y"][1] = $this.parent("tr").index(); 
 
    markSelection(selection); 
 
}).on("mouseleave", function() { 
 
    // End dragging 
 
    isDragging = false; 
 
});

#pixels { 
 
    border-collapse: collapse; 
 
} 
 

 
#pixels td { 
 
    border: 1px solid black; 
 
    width: 64px; 
 
    height: 64px; 
 
} 
 

 
#pixels td.selected { 
 
    outline: 3px solid red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="pixels"> 
 
    <tbody style="background-color: rgb(255, 255, 255);"> 
 
    <tr> 
 
     <td style="border-color:#000000;"></td> 
 
     <td style="border-color:#000000;"></td> 
 
     <td style="border-color:#000000;"></td> 
 
     <td style="border-color:#000000;"></td> 
 
     <td style="border-color:#000000;"></td> 
 
    </tr> 
 
    <tr> 
 
     <td style="border-color:#000000;"></td> 
 
     <td style="border-color:#000000;"></td> 
 
     <td style="border-color:#000000;"></td> 
 
     <td style="border-color:#000000;"></td> 
 
     <td style="border-color:#000000;"></td> 
 
    </tr> 
 
    <tr> 
 
     <td style="border-color:#000000;"></td> 
 
     <td style="border-color:#000000;"></td> 
 
     <td style="border-color:#000000;"></td> 
 
     <td style="border-color:#000000;"></td> 
 
     <td style="border-color:#000000;"></td> 
 
    </tr> 
 
    <tr> 
 
     <td style="border-color:#000000;"></td> 
 
     <td style="border-color:#000000;"></td> 
 
     <td style="border-color:#000000;"></td> 
 
     <td style="border-color:#000000;"></td> 
 
     <td style="border-color:#000000;"></td> 
 
    </tr> 
 
    <tr> 
 
     <td style="border-color:#000000;"></td> 
 
     <td style="border-color:#000000;"></td> 
 
     <td style="border-color:#000000;"></td> 
 
     <td style="border-color:#000000;"></td> 
 
     <td style="border-color:#000000;"></td> 
 
    </tr> 
 
    </tbody> 
 
</table>