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

PanJiaChen · web-flow · commit 0d40222b6420 · 2019-04-04T16:21:45.000+08:00
diff --git a/src/components/DndList/index.vue b/src/components/DndList/index.vue
@@ -2,7 +2,7 @@
   <div class="dndList">
     <div :style="{width:width1}" class="dndList-list">
       <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 class="list-complete-item-handle">
             {{ element.id }}[{{ element.author }}] {{ element.title }}
@@ -94,6 +94,11 @@ export default {
       if (this.isNotInList1(ele)) {
         this.list1.push(ele)
       }
+    },
+    setData(dataTransfer) {
+      // to avoid Firefox bug
+      // Detail see : https://github.com/RubaXa/Sortable/issues/1012
+      dataTransfer.setData('Text', '')
     }
   }
 }
diff --git a/src/components/Kanban/index.vue b/src/components/Kanban/index.vue
@@ -7,6 +7,7 @@
       :list="list"
       v-bind="$attrs"
       class="board-column-content"
+      :set-data="setData"
     >
       <div v-for="element in list" :key="element.id" class="board-item">
         {{ element.name }} {{ element.id }}
@@ -39,6 +40,13 @@ export default {
         return []
       }
     }
+  },
+  methods: {
+    setData(dataTransfer) {
+      // to avoid Firefox bug
+      // Detail see : https://github.com/RubaXa/Sortable/issues/1012
+      dataTransfer.setData('Text', '')
+    }
   }
 }
 </script>
diff --git a/src/views/table/dragTable.vue b/src/views/table/dragTable.vue
@@ -113,9 +113,9 @@ export default {
       this.sortable = Sortable.create(el, {
         ghostClass: 'sortable-ghost', // Class name for the drop placeholder,
         setData: function(dataTransfer) {
-          dataTransfer.setData('Text', '')
           // to avoid Firefox bug
           // Detail see : https://github.com/RubaXa/Sortable/issues/1012
+          dataTransfer.setData('Text', '')
         },
         onEnd: evt => {
           const targetRow = this.list.splice(evt.oldIndex, 1)[0]

Original file line number	Diff line number	Diff line change
`@@ -2,7 +2,7 @@`
`2`	`2`	`<div class="dndList">`
`3`	`3`	`<div :style="{width:width1}" class="dndList-list">`
`4`	`4`	`<h3>{{ list1Title }}</h3>`
`5`		`- <draggable :list="list1" group="article" class="dragArea">`
	`5`	`+ <draggable :set-data="setData" :list="list1" group="article" class="dragArea">`
`6`	`6`	`<div v-for="element in list1" :key="element.id" class="list-complete-item">`
`7`	`7`	`<div class="list-complete-item-handle">`
`8`	`8`	`{{ element.id }}[{{ element.author }}] {{ element.title }}`
`@@ -94,6 +94,11 @@ export default {`
`94`	`94`	`if (this.isNotInList1(ele)) {`
`95`	`95`	`this.list1.push(ele)`
`96`	`96`	`}`
	`97`	`+ },`
	`98`	`+ setData(dataTransfer) {`
	`99`	`+ // to avoid Firefox bug`
	`100`	`+ // Detail see : https://github.com/RubaXa/Sortable/issues/1012`
	`101`	`+ dataTransfer.setData('Text', '')`
`97`	`102`	`}`
`98`	`103`	`}`
`99`	`104`	`}`
Original file line number	Diff line number	Diff line change
`@@ -7,6 +7,7 @@`
`7`	`7`	`:list="list"`
`8`	`8`	`v-bind="$attrs"`
`9`	`9`	`class="board-column-content"`
	`10`	`+ :set-data="setData"`
`10`	`11`	`>`
`11`	`12`	`<div v-for="element in list" :key="element.id" class="board-item">`
`12`	`13`	`{{ element.name }} {{ element.id }}`
`@@ -39,6 +40,13 @@ export default {`
`39`	`40`	`return []`
`40`	`41`	`}`
`41`	`42`	`}`
	`43`	`+ },`
	`44`	`+ methods: {`
	`45`	`+ setData(dataTransfer) {`
	`46`	`+ // to avoid Firefox bug`
	`47`	`+ // Detail see : https://github.com/RubaXa/Sortable/issues/1012`
	`48`	`+ dataTransfer.setData('Text', '')`
	`49`	`+ }`
`42`	`50`	`}`
`43`	`51`	`}`
`44`	`52`	`</script>`