Skip to content

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

Open
@niu-peng

Description

@niu-peng
<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");
      })
  }

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions