如何使用鼠标选择一系列元素（例如日历日期范围选择器）？

Question

我想我的问题很简单。我正在用 Jquery 制作一个完整的日历。我想知道我该怎么做，就像我会在图片上展示的那样。用户选择了一个月的第 3 天（它将显示为蓝色），如果他将鼠标悬停在 8 上，则该范围内的所有数字都会得到一个类。所以.. 4,5,6,7,8 得到一些东西。如果他离开 8 并返回 7，则 8 没有添加类，应该删除。日历显示了我的想法，我手动完成了：日历显示我此时拥有： HTML                <div class="new-calendar-inside">                <div class="month-and-year-calendar">                    <div class="left-arrow prev-month"></div>                    <div class="month-year actual"></div>                    <div class="right-arrow next-month"><i class="icon chevron right"></i>                    </div>                </div>                <div class="calendar-days-list">                    <table class="table table-bordered">                        <tr class="days-of-the-week">                            <th>S</th>                            <th>T</th>                            <th>Q</th>                            <th>Q</th>                            <th>S</th>                            <th>S</th>                            <th>D</th>                        </tr>                    </table>                </div>            </div>            <div class="calendar-buttons">                <button class="new-button no-border-button">Cancelar</button>                <button id="confirm" class="new-button no-border-button">Ok</button>            </div>        </div>查询this.getCalendarTable().on("click", "td", function () {        var row = _this.getCalendarTable().find(".selected");        var rowOrange = _this.getCalendarTable().find(".selected-orange");        var table = _this.getCalendarTable();        if (_this.getContainer().find(".new-calendar.simple").hasClass("mini")) {可能我需要在鼠标悬停时获得最后一个位置，但我不知道该怎么做。

Answer 1

不要因为您遇到的确切原因而使用 mouseover 和 mouseout。

而是在鼠标事件期间跟踪开始和结束索引。然后简单地比较每天是否在该范围之间。

• 如果用户以相反的顺序选择，请确保考虑到end可能是 < start。

• 还要确保考虑鼠标在没有特定日期悬停时可能会被释放。

1 单击/拖动：

let div = document.querySelector('div');

for (let i = 0; i < 31; i++) {

  let span = document.createElement('span');

  span.textContent = i + 1;

  div.appendChild(span);

  span.addEventListener('mousedown', () => beginSelection(i));

  span.addEventListener('mousemove', () => updateSelection(i));

  span.addEventListener('mouseup', () => endSelection(i));

}

document.addEventListener('mouseup', () => endSelection());

let selecting, start, end;

let beginSelection = i => {

  selecting = true;

  start = i;

  updateSelection(i);

};

let endSelection = (i = end) => {

  updateSelection(i);

  selecting = false;

};

let updateSelection = i => {

  if (selecting)

    end = i;

  [...document.querySelectorAll('span')].forEach((span, i) =>

    span.classList.toggle('selected', i >= start && i <= end || i >= end && i <= start));

};

div {

  display: flex;

  width: 200px;

  flex-wrap: wrap;

}

span {

  width: 30px;

  border: 1px solid;

  padding: 5px;

  user-select: none;

}

span.selected {

  background: #adf;

}

span:hover:not(.selected) {

  background: #cfefff;

}

<div><div>

2次点击：

let div = document.querySelector('div');

for (let i = 0; i < 31; i++) {

  let span = document.createElement('span');

  span.textContent = i + 1;

  div.appendChild(span);

  span.addEventListener('click', () => toggleSelection(i));

  span.addEventListener('mousemove', () => updateSelection(i));

}

let selecting, start, end;

let toggleSelection = i => {

  if (selecting)

    endSelection(i);

  else

    beginSelection(i);

};

let beginSelection = i => {

  selecting = true;

  start = i;

  updateSelection(i);

};

let endSelection = (i = end) => {

  updateSelection(i);

  selecting = false;

};

let updateSelection = i => {

  if (selecting)

    end = i;

  [...document.querySelectorAll('span')].forEach((span, i) =>

    span.classList.toggle('selected', i >= start && i <= end || i >= end && i <= start));

};

div {

  display: flex;

  width: 200px;

  flex-wrap: wrap;

}

span {

  width: 30px;

  border: 1px solid;

  padding: 5px;

  user-select: none;

}

span.selected {

  background: #adf;

}

span:hover:not(.selected) {

  background: #cfefff;

}

<div>

  <div>