vue-draggable拖拽完成后,原元素会出现闪影
时间: 2023-08-04 10:26:29 浏览: 107
这个问题可能是由于浏览器的重绘机制导致的。在拖拽结束时,原元素被移动到了新的位置,并且拖拽的元素也被新建了一个,这时浏览器可能需要重新绘制页面,从而导致原元素出现闪影。
你可以尝试在拖拽结束时,延时一段时间再移除原元素,等待浏览器完成重绘,这样应该能够避免闪影问题。代码示例:
```javascript
methods: {
onEnd() {
// 延时一段时间再移除元素
setTimeout(() => {
this.removeElement();
}, 100);
},
removeElement() {
// 移除元素
this.$refs.originalElement.remove();
}
}
```
这样处理后,应该能够避免原元素出现闪影的问题。可以根据实际情况调整延时的时间。
相关问题
vue-draggable子元素拖拽
对于Vue.js项目中的子元素拖拽,你可以使用vue-draggable插件来实现。下面是一个简单的示例:
1. 首先,安装vue-draggable插件:
```
npm install vuedraggable
```
2. 在你的Vue组件中引入并注册该插件:
```javascript
import draggable from 'vuedraggable';
export default {
components: {
draggable
},
// ...
}
```
3. 在模板中使用`draggable`组件来实现子元素的拖拽:
```html
<template>
<div>
<draggable v-model="items">
<div v-for="(item, index) in items" :key="index">
<!-- 子元素内容 -->
</div>
</draggable>
</div>
</template>
```
在上面的示例中,`v-model`指令绑定了一个数组`items`,该数组中的元素将会被渲染为子元素,并且可以通过拖拽进行重新排序。你可以根据自己的需求对子元素进行样式和功能的定制。
请注意,你可能还需要根据具体情况调整插件的配置选项。你可以查阅vue-draggable的官方文档来获取更多详细信息和示例:https://github.com/SortableJS/Vue.Draggable
vue-draggable使用animation导致拖拽完成后,拖拽的元素延迟后才消失
这个问题可能是由于动画效果导致的延迟。你可以尝试在拖拽结束时,立即将拖拽的元素隐藏或移除,然后再开始动画效果。
具体地,你可以在拖拽结束时,使用 `transitionend` 事件监听动画结束,然后再将元素移除或隐藏。代码示例:
```javascript
methods: {
onEnd() {
// 在拖拽结束时立即将元素隐藏
this.hideElement();
// 监听动画结束事件
this.$refs.draggable.addEventListener('transitionend', this.onTransitionEnd);
},
onTransitionEnd(event) {
// 确认是拖拽元素的动画结束
if (event.target === this.$refs.draggable) {
// 动画结束后再将元素移除或隐藏
this.removeElement();
// 移除事件监听
this.$refs.draggable.removeEventListener('transitionend', this.onTransitionEnd);
}
},
hideElement() {
this.$refs.draggable.style.opacity = 0;
},
removeElement() {
// 移除元素
this.$refs.draggable.remove();
// 或者隐藏元素
// this.$refs.draggable.style.display = 'none';
}
}
```
这样处理后,应该能够避免拖拽完成后的延迟问题。