如何使Bootstrap 5轮播可拖动

问题描述

我正在尝试使用拖放API使boostrap 5旋转木马可拖动。将圆盘传送带拖动到可以放下的另一个位置时，我遇到问题，它将丢失vue组件css中的所有css设置，而我将无法再次移动它。我该如何解决此问题，并使轮播及其内容可拖动？

组件HTML

    <div class="row widget-area position-absolute m-0">
      
      <div class="col-3 pt-2 pb-2 dropzone" @drop.prevent="onDrop($event)" @dragover.prevent @dragenter.prevent="ondragenter($event)" @dragleave="onDragleave($event)">
        <div id="newsCarousel" class="carousel slide position-absolute" data-ride="carousel" draggable="true" @dragstart="startDrag($event)">
          <!-- carousel inner -->
          <div class="carousel-inner" draggable="true">
            <div class="carousel-item card draggable-el position-absolute" :class="{ 'active': index === 0 }" :id="index" v-for="( news,index ) in newsFeed.articles" :key="index" draggable="true">
              <img class="card-img-top" :src="news.image" :id="index" draggable="true" @dragstart="startDrag($event)">
              <div class="card-body p-2">
                <a class="text-decoration-none text-body" :href="news.source.url">
                  <small class="d-block text-muted">{{ news.source.name }}</small>
                </a>
                <a class="h6 text-decoration-none text-body card-title stretched-link" :href="news.url">{{ news.title }}</a>
              </div>
            </div>
          </div>
          <!-- carousel controls -->
          <a class="carousel-control-prev" href="#newsCarousel" role="button" data-slide="prev" draggable="true">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="visually-hidden">PrevIoUs</span>
          </a>
          <a class="carousel-control-next" href="#newsCarousel" role="button" data-slide="next" draggable="true">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Next</span>
          </a>
        </div>
      </div>
      
      <div class="col-3 pt-2 pb-2 dropzone" 
        @drop.prevent="onDrop($event)" 
        @dragover.prevent 
        @dragenter.prevent="ondragenter($event)" 
        @dragleave="onDragleave($event)">
      </div>

      <div class="col-3 pt-2 pb-2 dropzone" 
        @drop.prevent="onDrop($event)" 
        @dragover.prevent 
        @dragenter.prevent="ondragenter($event)" 
        @dragleave="onDragleave($event)">
      </div>

      <div class="col-3 pt-2 pb-2 dropzone" 
        @drop.prevent="onDrop($event)" 
        @dragover.prevent 
        @dragenter.prevent="ondragenter($event)" 
        @dragleave="onDragleave($event)">
      </div>

    </div>

JS代码

    //drag n drop
    startDrag(e) {
      let ids = [];
      e.dataTransfer.dropEffect = 'move';
      e.dataTransfer.effectAllowed = 'move';
      const items = document.getElementsByClassName('draggable-el');
      items.forEach( (el) => {
        el.classList.add('dragging');
        ids.push(el.id);      
      });
      e.dataTransfer.setData('text/plain',JSON.stringify(ids));     
    },ondragenter(e) {
      e.target.classList.add('drop');
    },onDragleave(e) {
      e.target.classList.remove('drop');
    },onDrop(e) {
      let ids = JSON.parse(e.dataTransfer.getData('text/plain'));
      ids.forEach( (id) => {
        const item = document.getElementById(id);
        item.classList.remove('dragging');
        e.target.classList.remove('drop');
        e.target.appendChild(item);
      });
      // return false;
    }

ScopED CSS

.widget-area {
  width: 100%;
  height: 350px;
  top: 8em;
  z-index: 200;

  .dropzone {
    &.drop{
      border: rgba(255,255,0.3) dotted 1px;
      .draggable-el {
        pointer-events: none;
      }
    }
  }
  #newsCarousel {
    // width: 18.5rem;
    // height: 330px;
    .carousel-inner {
      width: 18.5rem;
      height: 330px;
      z-index: 300;
      .draggable-el {
        height: 330px;
        width: 18.5rem;
        transition: all 0.3s cubic-bezier(0.4,0.0,0.2,1);
        &:active {
          cursor: grabbing;
        }  
        &.dragging {
          opacity: .5;
          transform: scale(.8);
        }
      }
    }
    .carousel-control-prev,.carousel-control-next {
      z-index: 300;
      top: -6em;
    }
  }
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）