Skip to content

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

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
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions