Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
niu-peng opened this issue Mar 21, 2025 · 0 comments

Comments

@niu-peng
Copy link

niu-peng commented Mar 21, 2025

<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 niu-peng reopened this Mar 21, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant