反应漂亮的dnd-使可拖动对象跳过组件

Question

我一直在使用react dnd并在选项卡内生成可拖动项目的列表：

您在中间看到的广告组件不可拖动（请参见下面的代码）。 当我拖动并切换带有广告组件旁边的项目的地方时，会发生什么情况，这些项目与它重叠：

如何使项目仅与自己切换位置并“跳过”广告组件？在下面添加代码 谢谢！

data.items.map((item, index) => !item.delete &&
          (
            <React.Fragment>
              { ad && ad.displayIndex === index &&
                <div
                  className={classNames({
                    [styles.itemListAdContainer]      : !isAdRemoved,
                    [mobileStyles.itemListAdContainer]: !isAdRemoved,
                    })}
                >
                  { !isAdRemoved &&
                    <ItemListAd
                      data={ad.data}
                      onClose={() => this.setState({ isAdRemoved: true })}
                    /> }
                </div>
              }

              <Draggable
                key={item.id}
                draggableId={item.id}
                index={index}
              >
                {(provided, snapshot) => (
                  <div
                    ref={provided.innerRef}
                    {...provided.draggableProps}
                    {...provided.dragHandleProps}
                  >
                    <Item
                      showDivider={ad.displayIndex !== index + 1 || isAdRemoved}
                      data={item}
                      key={item.id}
                      onChange={data => onItemChange(item, data)}
                    />
                  </div>
                )}
              </Draggable>
            </React.Fragment>
        ))

这是一个地图函数，用于渲染category \ tab组件（大容器）中的项目。整个category \ tab组件都是可放置的