一、 hover 不能正常的跟随
js复制代码<!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" 即可解决
js复制代码<draggable forceFallback="true" >
第二种： 通过 hover class 来控制的话, 通过 setHoverEffect 和 hideHovered 两个方法来控制，具体可自行粘贴代码尝试 VueJS在线运行,代码测试 - 在线编辑器(nhooo.com)
js复制代码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"
js复制代码<draggable forceFallback="true" >
关于 foreceFallback
| forceFallback | 默认false，忽略HTML5的拖拽行为，因为h5里有个属性也是可以拖动，你要自定义ghostClass chosenClass dragClass样式时，建议forceFallback设置为true |
|---|
参考链接：
