Vue.Draggable icon indicating copy to clipboard operation
Vue.Draggable copied to clipboard

vuedraggable的自定义事件@start会导致ghostClass属性失效是什么原因导致的

Open niu-peng opened this issue 7 months ago • 0 comments

<draggable
      force-fallback="true"
      chosen-class="chosen"
      ghost-class="ghost"
      animation="300"
      v-model="List" group='itxst' @end="end" @start="start">
<!--简单循环代码部分-->


</draggable>

js部分

start($event) {
      this.drag = true;
  }
  end($event) {
      this.drag = false;
  }

style部分

.chosen{
    opacity: 1 !important;
    background: red !important;
  }
  .ghost {
      background: black !important;
  }

以上代码在不做处理的情况下会导致 chosen-class失效,我发现如果取消@start="start"事件就会生效。

如果想要生效就得

  start($event) {
      this.drag = true;
      this.$nextTick(()=>{
        $event.item.classList.add("ghost");
      })
  }

niu-peng avatar Mar 21 '25 09:03 niu-peng