Skip to content

Commit bec2707

Browse files
David-DesmaisonsDavid-Desmaisons
committed
added change event based on discussion on issue #48 
1 parent a47c72f commit bec2707

File tree

6 files changed

+49
-26
lines changed

6 files changed

+49
-26
lines changed

‎dist/vuedraggable.js

Lines changed: 26 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -24,12 +24,6 @@ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol
2424
}).indexOf(element);
2525
}
2626

27-
// function updatePosition (collection, oldIndex, newIndex) {
28-
// if (collection) {
29-
// collection.splice(newIndex, 0, collection.splice(oldIndex, 1)[0])
30-
// }
31-
// }
32-
3327
function _computeIndexes(slots, children) {
3428
return !slots ? [] : Array.prototype.map.call(children, function (elt) {
3529
return computeVmIndex(slots, elt);
@@ -151,11 +145,6 @@ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol
151145
_this3.visibleIndexes = _computeIndexes(_this3.getChildrenNodes(), _this3.rootContainer.children);
152146
});
153147
},
154-
updatePosition: function updatePosition(oldIndex, newIndex) {
155-
if (this.list) {
156-
this.list.splice(newIndex, 0, this.list.splice(oldIndex, 1)[0]);
157-
}
158-
},
159148
getUnderlyingVm: function getUnderlyingVm(htmlElt) {
160149
var index = computeVmIndex(this.getChildrenNodes(), htmlElt);
161150
var element = this.list[index];
@@ -167,9 +156,23 @@ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol
167156
if (!__vue__ || !__vue__.$options || __vue__.$options._componentTag !== "transition-group") {
168157
return __vue__;
169158
}
170-
171159
return __vue__.$parent;
172160
},
161+
emitChanges: function emitChanges(evt) {
162+
var _this4 = this;
163+
164+
this.$nextTick(function () {
165+
_this4.$emit('changes', evt);
166+
});
167+
},
168+
spliceList: function spliceList() {
169+
var _list;
170+
171+
(_list = this.list).splice.apply(_list, arguments);
172+
},
173+
updatePosition: function updatePosition(oldIndex, newIndex) {
174+
this.list.splice(newIndex, 0, this.list.splice(oldIndex, 1)[0]);
175+
},
173176
getRelatedContextFromMoveEvent: function getRelatedContextFromMoveEvent(_ref2) {
174177
var to = _ref2.to;
175178
var related = _ref2.related;
@@ -201,8 +204,10 @@ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol
201204
var domNewIndex = evt.newIndex;
202205
var numberIndexes = indexes.length;
203206
var newIndex = domNewIndex > numberIndexes - 1 ? numberIndexes : indexes[domNewIndex];
204-
this.list.splice(newIndex, 0, element);
207+
this.spliceList(newIndex, 0, element);
205208
this.computeIndexes();
209+
var added = { element: element, newIndex: newIndex };
210+
this.emitChanges({ added: added });
206211
},
207212
onDragRemove: function onDragRemove(evt) {
208213
insertNodeAt(this.rootContainer, evt.item, evt.oldIndex);
@@ -212,14 +217,18 @@ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol
212217
return;
213218
}
214219
var oldIndex = this.context.index;
215-
this.list.splice(oldIndex, 1);
220+
this.spliceList(oldIndex, 1);
221+
var removed = { element: this.context.element, oldIndex: oldIndex };
222+
this.emitChanges({ removed: removed });
216223
},
217224
onDragUpdate: function onDragUpdate(evt) {
218225
removeNode(evt.item);
219226
insertNodeAt(evt.from, evt.item, evt.oldIndex);
220-
var oldIndexVM = this.context.index;
221-
var newIndexVM = this.visibleIndexes[evt.newIndex];
222-
this.updatePosition(oldIndexVM, newIndexVM);
227+
var oldIndex = this.context.index;
228+
var newIndex = this.visibleIndexes[evt.newIndex];
229+
this.updatePosition(oldIndex, newIndex);
230+
var updated = { element: this.context.element, oldIndex: oldIndex, newIndex: newIndex };
231+
this.emitChanges({ updated: updated });
223232
},
224233
onDragMove: function onDragMove(evt) {
225234
var onMove = this.move;

‎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/Two_Lists.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,14 +16,14 @@ <h1>Vue Dragable</h1>
1616

1717
<div class="drag">
1818
<h2>List 1 draggable</h2>
19-
<draggable class="dragArea" :list="list1" :options="{group:'people'}">
19+
<draggable class="dragArea" :list="list1" :options="{group:'people'}" @change="log">
2020
<div v-for="(element, index) in list1" >
2121
{{element.name}} {{index}}
2222
</div>
2323
</draggable>
2424

2525
<h2>List 2 draggable</h2>
26-
<draggable class="dragArea" :list="list2" :options="{group:'people'}" >
26+
<draggable class="dragArea" :list="list2" :options="{group:'people'}" @change="log">
2727
<div v-for="(element, index) in list2" :key="index">{{element.name}}</div>
2828
</draggable>
2929
</div>

‎examples/Two_Lists_Clone.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,14 +16,14 @@ <h1>Vue Dragable</h1>
1616

1717
<div class="drag">
1818
<h2>List 1 v-dragable-for</h2>
19-
<draggable id="list1" :list="list1" class="dragArea" :options="{group:{name:'people', pull:'clone', put:false }}">
19+
<draggable id="list1" :list="list1" class="dragArea" :options="{group:{name:'people', pull:'clone', put:false }}" @change="log">
2020
<div v-for="(element, index) in list1" :key="index">
2121
{{element.name}} {{index}}
2222
</div>
2323
</draggable>
2424

2525
<h2>List 2 v-dragable-for</h2>
26-
<draggable id="list2" :list="list2" class="dragArea" :options="{group:'people'}">
26+
<draggable id="list2" :list="list2" class="dragArea" :options="{group:'people'}" @change="log">
2727
<div v-for="(element, index) in list2" :key="index">{{element.name}}</div>
2828
</draggable>
2929
</div>

‎examples/script/complex.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,9 @@ var vm = new Vue({
2020
return {
2121
name : el.name + ' cloned'
2222
}
23+
},
24+
log: function (evt){
25+
console.log(evt)
2326
}
2427
}
2528
});

‎src/vuedraggable.js

Lines changed: 15 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -140,10 +140,15 @@
140140
if (!__vue__ || !__vue__.$options || __vue__.$options._componentTag!=="transition-group"){
141141
return __vue__
142142
}
143-
144143
return __vue__.$parent
145144
},
146145

146+
emitChanges (evt) {
147+
this.$nextTick( ()=>{
148+
this.$emit('change', evt)
149+
});
150+
},
151+
147152
spliceList () {
148153
this.list.splice(...arguments)
149154
},
@@ -184,6 +189,8 @@
184189
const newIndex = (domNewIndex > numberIndexes - 1) ? numberIndexes : indexes[domNewIndex]
185190
this.spliceList(newIndex, 0, element)
186191
this.computeIndexes()
192+
const added = {element, newIndex}
193+
this.emitChanges({added})
187194
},
188195

189196
onDragRemove (evt) {
@@ -195,14 +202,18 @@
195202
}
196203
const oldIndex = this.context.index
197204
this.spliceList(oldIndex, 1)
205+
const removed = {element: this.context.element, oldIndex}
206+
this.emitChanges({removed})
198207
},
199208

200209
onDragUpdate (evt) {
201210
removeNode(evt.item)
202211
insertNodeAt(evt.from, evt.item, evt.oldIndex)
203-
const oldIndexVM = this.context.index
204-
const newIndexVM = this.visibleIndexes[evt.newIndex]
205-
this.updatePosition(oldIndexVM, newIndexVM)
212+
const oldIndex = this.context.index
213+
const newIndex = this.visibleIndexes[evt.newIndex]
214+
this.updatePosition(oldIndex, newIndex)
215+
const moved = {element: this.context.element, oldIndex, newIndex}
216+
this.emitChanges({moved})
206217
},
207218

208219
onDragMove (evt) {

0 commit comments

Comments
 (0)