如何在iron-selector中通过鼠标拖拽或矩形框选实现多选？

我刚好在类似的日历选择场景下解决过这个问题，结合你用的Polymer 1.11.3和iron-selector 2.1.0版本，咱们可以通过手动监听鼠标事件来实现拖拽连续选择和矩形框选这两种功能，官方文档确实没提供现成的API，所以得自己封装逻辑。下面是具体的实现方案：

这个方案完美匹配你说的“点击周日7号拖拽到15号选中所有中间项”的场景，核心是跟踪鼠标的按下、移动、松开事件，计算选中项的索引范围：

实现步骤 #

1. 给iron-selector开启多选模式（设置multi="true"），这是多选功能的前提。
2. 给iron-selector绑定mousedown、mousemove、mouseup、mouseleave事件，用来跟踪拖拽状态。
3. 在mousedown事件中记录起始选中项的索引，标记拖拽开始，同时清空之前的选中状态。
4. 在mousemove事件中，实时获取当前鼠标悬停的项，计算起始和当前项的索引范围，调用iron-selector的API选中范围内的所有项。
5. 在mouseup或mouseleave时结束拖拽状态，清理临时变量。

自定义元素代码示例 #

<dom-module id="calendar-selector">
  <template>
    <style>
      iron-selector {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        gap: 8px;
        padding: 16px;
      }
      .date-item {
        padding: 12px;
        text-align: center;
        border: 1px solid #eee;
        cursor: pointer;
      }
      .date-item.iron-selected {
        background-color: #2196F3;
        color: white;
        border-color: #1976D2;
      }
    </style>

    <iron-selector id="selector" multi="true" class="selector">
      <template is="dom-repeat" items="{{dates}}">
        <div class="date-item">{{item}}</div>
      </template>
    </iron-selector>
  </template>

  <script>
    Polymer({
      is: 'calendar-selector',
      properties: {
        dates: {
          type: Array,
          value: () => Array.from({length: 31}, (_, i) => i + 1)
        },
        _dragStartIndex: {
          type: Number,
          value: -1
        },
        _isDragging: {
          type: Boolean,
          value: false
        }
      },
      listeners: {
        '#selector mousedown': '_onMouseDown',
        '#selector mousemove': '_onMouseMove',
        '#selector mouseup': '_onDragEnd',
        '#selector mouseleave': '_onDragEnd'
      },
      _onMouseDown(e) {
        // 只处理点击日期项的情况
        const item = e.target;
        const index = this.$.selector.items.indexOf(item);
        if (index === -1) return;

        this._dragStartIndex = index;
        this._isDragging = true;

        // 清空之前选中项，再选中当前起始项
        this.$.selector.clearSelection();
        this.$.selector.select(index);

        // 阻止浏览器默认的文本选中行为
        e.preventDefault();
      },
      _onMouseMove(e) {
        if (!this._isDragging) return;

        const item = e.target;
        const currentIndex = this.$.selector.items.indexOf(item);
        if (currentIndex === -1) return;

        // 处理起始索引大于当前索引的反向拖拽
        const start = Math.min(this._dragStartIndex, currentIndex);
        const end = Math.max(this._dragStartIndex, currentIndex);

        // 重新选中范围内的所有项
        this.$.selector.clearSelection();
        for (let i = start; i <= end; i++) {
          this.$.selector.select(i);
        }
      },
      _onDragEnd() {
        this._isDragging = false;
        this._dragStartIndex = -1;
      }
    });
  </script>
</dom-module>

如果需要通过拖动鼠标绘制矩形来框选范围内的项，需要额外添加一个临时的选框元素，同时计算每个项是否在选框范围内：

实现步骤 #

1. 在iron-selector的容器内添加一个绝对定位的隐藏div作为选框。
2. 在mousedown时记录鼠标起始坐标，显示选框并设置初始位置。
3. 在mousemove时实时更新选框的宽高和位置，同时遍历所有项，判断哪些项在选框范围内并选中。
4. 在mouseup时隐藏选框，结束框选状态。

自定义元素代码示例（基于上面的日历选择器修改） #

<dom-module id="calendar-selector">
  <template>
    <style>
      /* 新增选框容器和样式 */
      .selector-container {
        position: relative;
        display: inline-block;
      }
      .selection-box {
        position: absolute;
        border: 2px solid #2196F3;
        background-color: rgba(33, 150, 243, 0.2);
        pointer-events: none;
        display: none;
      }
      /* 原有样式保持不变 */
      iron-selector {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        gap: 8px;
        padding: 16px;
      }
      .date-item {
        padding: 12px;
        text-align: center;
        border: 1px solid #eee;
        cursor: pointer;
      }
      .date-item.iron-selected {
        background-color: #2196F3;
        color: white;
        border-color: #1976D2;
      }
    </style>

    <div class="selector-container">
      <div id="selectionBox" class="selection-box"></div>
      <iron-selector id="selector" multi="true" class="selector">
        <template is="dom-repeat" items="{{dates}}">
          <div class="date-item">{{item}}</div>
        </template>
      </iron-selector>
    </div>
  </template>

  <script>
    Polymer({
      is: 'calendar-selector',
      properties: {
        dates: {
          type: Array,
          value: () => Array.from({length: 31}, (_, i) => i + 1)
        },
        _boxStartX: {
          type: Number,
          value: 0
        },
        _boxStartY: {
          type: Number,
          value: 0
        },
        _isBoxSelecting: {
          type: Boolean,
          value: false
        }
      },
      listeners: {
        '.selector-container mousedown': '_onBoxMouseDown',
        '.selector-container mousemove': '_onBoxMouseMove',
        '.selector-container mouseup': '_onBoxSelectEnd',
        '.selector-container mouseleave': '_onBoxSelectEnd'
      },
      _onBoxMouseDown(e) {
        // 点击日期项时触发拖拽选择，点击空白区域触发框选
        if (e.target.classList.contains('date-item')) return;

        this._isBoxSelecting = true;
        const containerRect = this.$.selector.getBoundingClientRect();
        // 计算鼠标相对于容器的坐标
        this._boxStartX = e.clientX - containerRect.left;
        this._boxStartY = e.clientY - containerRect.top;

        const box = this.$.selectionBox;
        box.style.display = 'block';
        box.style.left = `${this._boxStartX}px`;
        box.style.top = `${this._boxStartY}px`;
        box.style.width = '0px';
        box.style.height = '0px';

        // 清空之前的选中项
        this.$.selector.clearSelection();
        e.preventDefault();
      },
      _onBoxMouseMove(e) {
        if (!this._isBoxSelecting) return;

        const containerRect = this.$.selector.getBoundingClientRect();
        const currentX = e.clientX - containerRect.left;
        const currentY = e.clientY - containerRect.top;

        // 更新选框的位置和尺寸
        const box = this.$.selectionBox;
        box.style.left = `${Math.min(this._boxStartX, currentX)}px`;
        box.style.top = `${Math.min(this._boxStartY, currentY)}px`;
        box.style.width = `${Math.abs(currentX - this._boxStartX)}px`;
        box.style.height = `${Math.abs(currentY - this._boxStartY)}px`;

        // 判断每个日期项是否在选框内
        const boxRect = box.getBoundingClientRect();
        this.$.selector.items.forEach((item, index) => {
          const itemRect = item.getBoundingClientRect();
          // 矩形相交判断逻辑
          const isIntersect = !(
            boxRect.right < itemRect.left ||
            boxRect.left > itemRect.right ||
            boxRect.bottom < itemRect.top ||
            boxRect.top > itemRect.bottom
          );
          isIntersect ? this.$.selector.select(index) : this.$.selector.deselect(index);
        });
      },
      _onBoxSelectEnd() {
        this._isBoxSelecting = false;
        this.$.selectionBox.style.display = 'none';
      }
    });
  </script>
</dom-module>

注意事项 #

• 必须确保iron-selector的multi属性设置为true，否则无法启用多选功能。
• 上面的代码已经兼容了两种选择逻辑：点击日期项触发拖拽连续选择，点击容器空白区域触发矩形框选。
• 你可以根据自己的UI需求调整选框的样式，比如颜色、透明度、边框样式等。
• 如果你的项是动态生成的，建议在dom-repeat的dom-change事件后再处理元素索引，避免出现获取不到正确items的情况。

内容的提问来源于stack exchange，提问作者yglodt