0

ドラッグ イベントを使用して、テーブル内のすべての td を選択する必要があります。私が達成しようとしているのは、最初に選択した td に基づいて、最後に選択した td までの日付範囲を作成することですが、それらは複数の行にまたがることができます。現時点では、nextUntil()withandSelf()を使用して最後に選択したものを含めていますが、現在の tr 内の td のみを選択します。以下は私のコードのサンプルです。助けてください。

this.BindCalendarMouseDrag = function () {
        var isMouseDown = false;
        var isHighlighted;
        var selectedDays = [];
        $(".tabCalendarContainer tr.trCalWeek td")
            .mousedown(function () {
                isMouseDown = true;
                $(this).addClass("highlighted");
                isHighlighted = $(this).hasClass("highlighted");
                selectedDays.push($(this));
                return false; // prevent text selection
            })
            .mouseover(function () {
                if (isMouseDown) {
                    $(this).addClass("highlighted", isHighlighted);

                    var firstSelectedDay = selectedDays[0];
                    firstSelectedDay.nextUntil($(this)).andSelf().add($(this)).addClass("highlighted", isHighlighted);

                    selectedDays.push($(this));
                }
            })
            .bind("selectstart", function () {
                return false;
            });

        $(document).mouseup(function () {
            isMouseDown = false;
            //alert(selectedDays.length);
        });
    };
4

1 に答える 1

0

自由に、ドラッグ可能な平日のカレンダーを示す jsFiddle を作成しました。BACKWARDS ドラッグにはまだ対応していませんが、コードを簡単に調整して対応できるはずです。

こちらからアクセスできます。

于 2012-09-03T12:44:52.090 に答える