fix[Drag]: fixed drag bug in firefox (#1841)

This commit is contained in:
花裤衩 2019-04-04 16:21:45 +08:00 committed by GitHub
parent e363c7a77b
commit 0d40222b64
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 15 additions and 2 deletions

View File

@ -2,7 +2,7 @@
<div class="dndList"> <div class="dndList">
<div :style="{width:width1}" class="dndList-list"> <div :style="{width:width1}" class="dndList-list">
<h3>{{ list1Title }}</h3> <h3>{{ list1Title }}</h3>
<draggable :list="list1" group="article" class="dragArea"> <draggable :set-data="setData" :list="list1" group="article" class="dragArea">
<div v-for="element in list1" :key="element.id" class="list-complete-item"> <div v-for="element in list1" :key="element.id" class="list-complete-item">
<div class="list-complete-item-handle"> <div class="list-complete-item-handle">
{{ element.id }}[{{ element.author }}] {{ element.title }} {{ element.id }}[{{ element.author }}] {{ element.title }}
@ -94,6 +94,11 @@ export default {
if (this.isNotInList1(ele)) { if (this.isNotInList1(ele)) {
this.list1.push(ele) this.list1.push(ele)
} }
},
setData(dataTransfer) {
// to avoid Firefox bug
// Detail see : https://github.com/RubaXa/Sortable/issues/1012
dataTransfer.setData('Text', '')
} }
} }
} }

View File

@ -7,6 +7,7 @@
:list="list" :list="list"
v-bind="$attrs" v-bind="$attrs"
class="board-column-content" class="board-column-content"
:set-data="setData"
> >
<div v-for="element in list" :key="element.id" class="board-item"> <div v-for="element in list" :key="element.id" class="board-item">
{{ element.name }} {{ element.id }} {{ element.name }} {{ element.id }}
@ -39,6 +40,13 @@ export default {
return [] return []
} }
} }
},
methods: {
setData(dataTransfer) {
// to avoid Firefox bug
// Detail see : https://github.com/RubaXa/Sortable/issues/1012
dataTransfer.setData('Text', '')
}
} }
} }
</script> </script>

View File

@ -113,9 +113,9 @@ export default {
this.sortable = Sortable.create(el, { this.sortable = Sortable.create(el, {
ghostClass: 'sortable-ghost', // Class name for the drop placeholder, ghostClass: 'sortable-ghost', // Class name for the drop placeholder,
setData: function(dataTransfer) { setData: function(dataTransfer) {
dataTransfer.setData('Text', '')
// to avoid Firefox bug // to avoid Firefox bug
// Detail see : https://github.com/RubaXa/Sortable/issues/1012 // Detail see : https://github.com/RubaXa/Sortable/issues/1012
dataTransfer.setData('Text', '')
}, },
onEnd: evt => { onEnd: evt => {
const targetRow = this.list.splice(evt.oldIndex, 1)[0] const targetRow = this.list.splice(evt.oldIndex, 1)[0]