javascript - Javascript は、表のなげなわスタイルでセルを選択します

Question

私は Javascript が初めてで、なげなわスタイルのテーブル選択ツールの作成に問題があります。

基本的に、マウスをテーブルの上にドラッグして、その領域内のすべてのセルを強調表示できるようにしたいので、後で選択したセルで何かを行うことができます。

これは、私が達成しようとしていることの非常にバグのあるフィドルです。 http://jsfiddle.net/kooldave98/ad5Z9/

var element = $("#rectangle");
// on mousedown
$(window).mousedown(function (e1) {
    // first move element on mouse location
    element.show().css({ top: e1.pageY, left: e1.pageX });
    // resize that div so it will be resizing while moouse is still pressed
    var resize = function (e2) {
        // you should check for direction in here and moves with top or left
        element.width(e2.pageX - e1.pageX);
        element.height(e2.pageY - e1.pageY);
    };
    $(window).mousemove(resize);
    // and finally unbind those functions when mouse click is released
    var unbind = function () {
        $(window).unbind(resize);
        $(window).unbind(unbind);
    };
    $(window).mouseup(unbind);
});

選択ツールをテーブル内の任意の方向に移動し、その後「ctrl」キーを使用して追加のセルを選択できるようにする必要があります。

どんな助けでも大歓迎です。

Answer 1

具体的には、jQuery UI Selectable ウィジェットを含めたら、次のことができます。

$('table').selectable(
    filter: 'td',      // Ensure elements are selected by table cell
);

次に、CSS にクラスが.ui-selectingあり、.ui-selectedそれを目的のハイライト色に設定できます。例えば

.ui-selecting {
    background: red;
}
.ui-selected {
    background: blue;
}

また、望ましくないデフォルトの選択動作もいくつかあります。それらを取り除く方法は次のとおりです。

$(document).ready(function() {
    $('table').mousedown(function(event) {
        return false;
    });
});

うまくいけば、単にtable. :)

Answer 2

これは、jQuery UI Selectableウィジェットを使用して行うことができます。