Skip to content

Commit 7b0b189

Browse files
pc-david\david.desmaisonsDavid-Desmaisons
pc-david\david.desmaisons
authored and
David-Desmaisons
committed
Use correct event to recalculate index (watch list instead of update) + DRY on test list on event
1 parent 40a4d90 commit 7b0b189

File tree

4 files changed

+36
-55
lines changed

4 files changed

+36
-55
lines changed

‎dist/vuedraggable.js

Lines changed: 14 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -44,14 +44,17 @@ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol
4444
var _this = this;
4545

4646
return function (evtData) {
47-
_this['onDrag' + evtName](evtData);
47+
if (_this.list !== null) {
48+
_this['onDrag' + evtName](evtData);
49+
}
4850
emit.call(_this, evtName, evtData);
4951
};
5052
}
5153

5254
var eventsListened = ['Start', 'Add', 'Remove', 'Update', 'End'];
5355
var eventsToEmit = ['Choose', 'Sort', 'Filter', 'Clone'];
54-
var readonlyProperties = ['Move'].concat(eventsListened).concat(eventsToEmit).map(function (evt) {
56+
// const readonlyProperties = ['Move'].concat(eventsListened).concat(eventsToEmit).map(evt => 'on'+evt);
57+
var readonlyProperties = ['Move'].concat(eventsListened, eventsToEmit).map(function (evt) {
5558
return 'on' + evt;
5659
});
5760

@@ -72,7 +75,7 @@ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol
7275
type: String,
7376
default: 'div'
7477
},
75-
validateMove: {
78+
move: {
7679
type: Function,
7780
default: null
7881
}
@@ -116,9 +119,6 @@ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol
116119
beforeDestroy: function beforeDestroy() {
117120
this._sortable.destroy();
118121
},
119-
updated: function updated() {
120-
this.computeIndexes();
121-
},
122122

123123

124124
computed: {
@@ -134,6 +134,9 @@ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol
134134
this._sortable.option(property, newOptionValue[property]);
135135
}
136136
}
137+
},
138+
list: function list() {
139+
this.computeIndexes();
137140
}
138141
},
139142

@@ -179,22 +182,18 @@ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol
179182
var context = { list: list, component: component };
180183
if (to !== related && list && component.getUnderlyingVm) {
181184
var destination = component.getUnderlyingVm(related);
182-
Object.assign(destination, context);
183-
return destination;
185+
return Object.assign(destination, context);
184186
}
185187

186188
return context;
187189
},
188190
onDragStart: function onDragStart(evt) {
189-
if (!this.list) {
190-
return;
191-
}
192191
this.context = this.getUnderlyingVm(evt.item);
193192
evt.item._underlying_vm_ = this.clone(this.context.element);
194193
},
195194
onDragAdd: function onDragAdd(evt) {
196195
var element = evt.item._underlying_vm_;
197-
if (!this.list || element === undefined) {
196+
if (element === undefined) {
198197
return;
199198
}
200199
removeNode(evt.item);
@@ -206,9 +205,6 @@ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol
206205
this.computeIndexes();
207206
},
208207
onDragRemove: function onDragRemove(evt) {
209-
if (!this.list) {
210-
return;
211-
}
212208
insertNodeAt(this.rootContainer, evt.item, evt.oldIndex);
213209
var isCloning = !!evt.clone;
214210
if (isCloning) {
@@ -219,25 +215,22 @@ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol
219215
this.list.splice(oldIndex, 1);
220216
},
221217
onDragUpdate: function onDragUpdate(evt) {
222-
if (!this.list) {
223-
return;
224-
}
225218
removeNode(evt.item);
226219
insertNodeAt(evt.from, evt.item, evt.oldIndex);
227220
var oldIndexVM = this.context.currentIndex;
228221
var newIndexVM = this.visibleIndexes[evt.newIndex];
229222
updatePosition(this.list, oldIndexVM, newIndexVM);
230223
},
231224
onDragMove: function onDragMove(evt) {
232-
var validate = this.validateMove;
233-
if (!validate || !this.list) {
225+
var onMove = this.move;
226+
if (!onMove || !this.list) {
234227
return true;
235228
}
236229

237230
var relatedContext = this.getRelatedContextFromMoveEvent(evt);
238231
var draggedContext = this.context;
239232
Object.assign(evt, { relatedContext: relatedContext, draggedContext: draggedContext });
240-
return validate(evt);
233+
return onMove(evt);
241234
},
242235
onDragEnd: function onDragEnd(evt) {
243236
this.computeIndexes();

‎dist/vuedraggable.min.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎examples/Cancel.html

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -12,23 +12,22 @@
1212
<body>
1313

1414
<div id="main">
15-
<h1>Vue Dragable</h1>
15+
<h1>Cancel Example</h1>
1616

17-
<!-- <div class="status">
17+
<div class="status">
1818
<p v-if="canDrag!=null" :class="canDrag? 'ok' : 'ko'">
1919
can Drag: {{canDrag}}
2020
</p>
2121
<p v-else>
2222
No drag operation
2323
</p>
24-
</div> -->
24+
</div>
2525

2626

2727
<div class="drag">
2828
<h2>List 1 draggable</h2>
2929
<draggable element="ul" class="dragArea" :list="list" :options="{group:'people'}" :move="checkMove" @end="endDrag">
30-
<li v-for="(element, index) in list">
31-
<!-- :class="{'target': element===targetElement}"> -->
30+
<li v-for="(element, index) in list" :class="{'target': element===targetElement}">
3231
{{element.name}}
3332
</li>
3433
</draggable>

‎src/vuedraggable.js

Lines changed: 17 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -34,14 +34,16 @@
3434

3535
function delegateAndEmit (evtName) {
3636
return (evtData) => {
37-
this['onDrag' + evtName](evtData)
37+
if (this.list!==null) {
38+
this['onDrag' + evtName](evtData)
39+
}
3840
emit.call(this, evtName, evtData)
3941
}
4042
}
4143

4244
const eventsListened = ['Start', 'Add', 'Remove', 'Update', 'End'];
4345
const eventsToEmit = ['Choose', 'Sort', 'Filter', 'Clone'];
44-
const readonlyProperties = ['Move'].concat(eventsListened).concat(eventsToEmit).map(evt => 'on'+evt);
46+
const readonlyProperties = ['Move', ...eventsListened, ...eventsToEmit].map(evt => 'on'+evt);
4547

4648
const props = {
4749
options: Object,
@@ -102,10 +104,6 @@
102104
this._sortable.destroy()
103105
},
104106

105-
updated () {
106-
this.computeIndexes()
107-
},
108-
109107
computed : {
110108
rootContainer () {
111109
return this.transitionMode? this.$el.children[0] : this.$el;
@@ -119,6 +117,10 @@
119117
this._sortable.option(property, newOptionValue[property] );
120118
}
121119
}
120+
},
121+
122+
list(){
123+
this.computeIndexes()
122124
}
123125
},
124126

@@ -135,21 +137,17 @@
135137
},
136138

137139
getUnderlyingVm (htmlElt) {
138-
const currentIndex = computeVmIndex(this.getChildrenNodes(), htmlElt)
139-
const element = this.list[currentIndex]
140-
return {currentIndex, element}
140+
const index = computeVmIndex(this.getChildrenNodes(), htmlElt)
141+
const element = this.list[index]
142+
return {index, element}
141143
},
142144

143145
getUnderlyingPotencialDraggableComponent ({__vue__}) {
144-
if (!__vue__){
146+
if (!__vue__ || !__vue__.$options || __vue__.$options._componentTag!=="transition-group"){
145147
return __vue__
146148
}
147149

148-
if (__vue__.$options._componentTag==="transition-group") {
149-
return __vue__.$parent
150-
}
151-
152-
return __vue__
150+
return __vue__.$parent
153151
},
154152

155153
getRelatedContextFromMoveEvent({to, related}) {
@@ -167,17 +165,14 @@
167165
return context
168166
},
169167

170-
onDragStart (evt) {
171-
if (!this.list) {
172-
return
173-
}
168+
onDragStart (evt) {
174169
this.context = this.getUnderlyingVm(evt.item)
175170
evt.item._underlying_vm_ = this.clone(this.context.element)
176171
},
177172

178173
onDragAdd (evt) {
179174
const element = evt.item._underlying_vm_
180-
if (!this.list || element === undefined) {
175+
if (element === undefined) {
181176
return
182177
}
183178
removeNode(evt.item)
@@ -190,26 +185,20 @@
190185
},
191186

192187
onDragRemove (evt) {
193-
if (!this.list) {
194-
return
195-
}
196188
insertNodeAt(this.rootContainer, evt.item, evt.oldIndex)
197189
const isCloning = !!evt.clone
198190
if (isCloning) {
199191
removeNode(evt.clone)
200192
return
201193
}
202-
const oldIndex = this.context.currentIndex
194+
const oldIndex = this.context.index
203195
this.list.splice(oldIndex, 1)
204196
},
205197

206198
onDragUpdate (evt) {
207-
if (!this.list) {
208-
return
209-
}
210199
removeNode(evt.item)
211200
insertNodeAt(evt.from, evt.item, evt.oldIndex)
212-
const oldIndexVM = this.context.currentIndex
201+
const oldIndexVM = this.context.index
213202
const newIndexVM = this.visibleIndexes[evt.newIndex]
214203
updatePosition(this.list, oldIndexVM, newIndexVM)
215204
},

0 commit comments

Comments
 (0)