一、 hover 不能正常的跟随
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>vue.draggable例子</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">
<script src="https://www.itxst.com/package/vue/vue.min.js"></script>
<script src="https://www.itxst.com/package/sortable/Sortable.min.js"></script>
<script src="https://www.itxst.com/package/vuedraggable/vuedraggable.umd.min.js"></script>
<style scoped>
/*被拖拽对象的样式*/
.item {
padding:20px 6px;
background-color: #fdfdfd;
border: solid 1px #eee;
margin-bottom: 10px;
cursor: move;
}
.item:hover {
background-color: red;
}
/*选中样式*/
.chosen {
border: solid 2px #3089dc !important;
}
</style>
</head>
<body style="padding:10px;">
<div id="app">
<div>{{drag?'拖拽中':'拖拽停止'}}</div>
<draggable
v-model="myArray"
chosen-class="chosen"
group="people"
animation="2000"
@start="onStart"
@end="onEnd">
<transition-group>
<div
class="item"
v-for="element in myArray"
:key="element.id"
>{{element.name}}</div>
</transition-group>
</draggable>
</div>
<script>
// 全局注册组件
Vue.component('vuedraggable', window.vuedraggable)
var app = new Vue({
el: '#app',
components: {
vuedraggable: window.vuedraggable,//当前页面注册组件
},
data() {
return {
drag: false,
myArray: [
{ people: 'cn', id: 1, name: 'www.itxst.com' },
{ people: 'cn', id: 2, name: 'www.baidu.com' },
{ people: 'cn', id: 3, name: 'www.taobao.com' },
{ people: 'us', id: 4, name: 'www.google.com' }
]
};
},
methods: {
onStart() {
this.drag = true;
},
onEnd() {
this.drag = false;
}
}
});
</script>
</body>
</html>
如图所示：拖动结束后， hover的状态不会及时更新
解决方式：
第一种： 添加 forceFallback="true" 即可解决
<draggable forceFallback="true" >
第二种： 通过 hover class 来控制的话, 通过 setHoverEffect 和 hideHovered 两个方法来控制，具体可自行粘贴代码尝试 VueJS在线运行,代码测试 - 在线编辑器(nhooo.com)
function removeElClass (elements, elClass) {
elements = [].slice.call(elements)
for (const el of elements) {
el.classList.remove(elClass)
}
return elements
}
function setHoverEffect (event) {
const childList = removeElClass(event.currentTarget.parentElement.children, 'hovered')
if( !childList.some((child) => child.classList.contains('sortable-chosen')) ) {
event.currentTarget.classList.add('hovered')
}
}
function hideHovered (event) {
const item = event.currentTarget
setTimeout(() => {
removeElClass(item.parentElement.children, 'hovered')
}, 1)
}
二 、 Safari after first drag not working
解决方式： 添加 forceFallback="true"
<draggable forceFallback="true" >
关于 foreceFallback
| forceFallback | 默认false，忽略HTML5的拖拽行为，因为h5里有个属性也是可以拖动，你要自定义ghostClass chosenClass dragClass样式时，建议forceFallback设置为true |
|---|
参考链接：
