Skip to content

Commit 40a4d90

Browse files
David-DesmaisonsDavid-Desmaisons
committed
WIP cancel operation
1 parent 0e604a8 commit 40a4d90

File tree

8 files changed

+104
-59
lines changed

8 files changed

+104
-59
lines changed

‎dist/vuedraggable.js

Lines changed: 48 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -31,24 +31,11 @@ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol
3131
}
3232

3333
function _computeIndexes(slots, children) {
34-
if (!slots) {
35-
return [];
36-
}
37-
return Array.prototype.map.call(children, function (elt) {
34+
return !slots ? [] : Array.prototype.map.call(children, function (elt) {
3835
return computeVmIndex(slots, elt);
3936
});
4037
}
4138

42-
function merge(target, source) {
43-
var output = Object(target);
44-
for (var nextKey in source) {
45-
if (source.hasOwnProperty(nextKey)) {
46-
output[nextKey] = source[nextKey];
47-
}
48-
}
49-
return output;
50-
}
51-
5239
function emit(evtName, evtData) {
5340
this.$emit(evtName.toLowerCase(), evtData);
5441
}
@@ -57,17 +44,14 @@ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol
5744
var _this = this;
5845

5946
return function (evtData) {
60-
var res = _this['onDrag' + evtName](evtData);
61-
if (res) {
62-
emit.call(_this, evtName, evtData);
63-
}
64-
return res;
47+
_this['onDrag' + evtName](evtData);
48+
emit.call(_this, evtName, evtData);
6549
};
6650
}
6751

68-
var eventsListened = ['Start', 'Add', 'Remove', 'Update', 'Move', 'End'];
52+
var eventsListened = ['Start', 'Add', 'Remove', 'Update', 'End'];
6953
var eventsToEmit = ['Choose', 'Sort', 'Filter', 'Clone'];
70-
var readonlyProperties = eventsListened.concat(eventsToEmit).map(function (evt) {
54+
var readonlyProperties = ['Move'].concat(eventsListened).concat(eventsToEmit).map(function (evt) {
7155
return 'on' + evt;
7256
});
7357

@@ -123,7 +107,9 @@ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol
123107
optionsAdded['on' + elt] = emit.bind(_this2, elt);
124108
});
125109

126-
var options = merge(this.options, optionsAdded);
110+
var options = Object.assign({}, this.options, optionsAdded, { onMove: function onMove(evt) {
111+
return _this2.onDragMove(evt);
112+
} });
127113
this._sortable = new Sortable(this.rootContainer, options);
128114
this.computeIndexes();
129115
},
@@ -168,18 +154,48 @@ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol
168154
var element = this.list[currentIndex];
169155
return { currentIndex: currentIndex, element: element };
170156
},
157+
getUnderlyingPotencialDraggableComponent: function getUnderlyingPotencialDraggableComponent(_ref) {
158+
var __vue__ = _ref.__vue__;
159+
160+
if (!__vue__) {
161+
return __vue__;
162+
}
163+
164+
if (__vue__.$options._componentTag === "transition-group") {
165+
return __vue__.$parent;
166+
}
167+
168+
return __vue__;
169+
},
170+
getRelatedContextFromMoveEvent: function getRelatedContextFromMoveEvent(_ref2) {
171+
var to = _ref2.to;
172+
var related = _ref2.related;
173+
174+
var component = this.getUnderlyingPotencialDraggableComponent(to);
175+
if (!component) {
176+
return { component: component };
177+
}
178+
var list = component.list;
179+
var context = { list: list, component: component };
180+
if (to !== related && list && component.getUnderlyingVm) {
181+
var destination = component.getUnderlyingVm(related);
182+
Object.assign(destination, context);
183+
return destination;
184+
}
185+
186+
return context;
187+
},
171188
onDragStart: function onDragStart(evt) {
172189
if (!this.list) {
173-
return true;
190+
return;
174191
}
175192
this.context = this.getUnderlyingVm(evt.item);
176193
evt.item._underlying_vm_ = this.clone(this.context.element);
177-
return true;
178194
},
179195
onDragAdd: function onDragAdd(evt) {
180196
var element = evt.item._underlying_vm_;
181197
if (!this.list || element === undefined) {
182-
return true;
198+
return;
183199
}
184200
removeNode(evt.item);
185201
var indexes = this.visibleIndexes;
@@ -188,50 +204,43 @@ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol
188204
var newIndex = domNewIndex > numberIndexes - 1 ? numberIndexes : indexes[domNewIndex];
189205
this.list.splice(newIndex, 0, element);
190206
this.computeIndexes();
191-
return true;
192207
},
193208
onDragRemove: function onDragRemove(evt) {
194209
if (!this.list) {
195-
return true;
210+
return;
196211
}
197212
insertNodeAt(this.rootContainer, evt.item, evt.oldIndex);
198213
var isCloning = !!evt.clone;
199214
if (isCloning) {
200215
removeNode(evt.clone);
201-
return true;
216+
return;
202217
}
203218
var oldIndex = this.context.currentIndex;
204219
this.list.splice(oldIndex, 1);
205-
return true;
206220
},
207221
onDragUpdate: function onDragUpdate(evt) {
208222
if (!this.list) {
209-
return true;
223+
return;
210224
}
211225
removeNode(evt.item);
212226
insertNodeAt(evt.from, evt.item, evt.oldIndex);
213227
var oldIndexVM = this.context.currentIndex;
214228
var newIndexVM = this.visibleIndexes[evt.newIndex];
215229
updatePosition(this.list, oldIndexVM, newIndexVM);
216-
return true;
217230
},
218231
onDragMove: function onDragMove(evt) {
219232
var validate = this.validateMove;
220-
if (!validate || !list) {
233+
if (!validate || !this.list) {
221234
return true;
222235
}
223236

224-
var targetComponent = evt.to.__vue__;
225-
if (targetComponent) {
226-
var destination = targetComponent.getUnderlyingVm(evt.related);
227-
console.log('destination', destination);
228-
}
229-
console.log('source', this.context);
237+
var relatedContext = this.getRelatedContextFromMoveEvent(evt);
238+
var draggedContext = this.context;
239+
Object.assign(evt, { relatedContext: relatedContext, draggedContext: draggedContext });
230240
return validate(evt);
231241
},
232242
onDragEnd: function onDragEnd(evt) {
233243
this.computeIndexes();
234-
return true;
235244
}
236245
}
237246
};

‎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: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,10 +14,21 @@
1414
<div id="main">
1515
<h1>Vue Dragable</h1>
1616

17+
<!-- <div class="status">
18+
<p v-if="canDrag!=null" :class="canDrag? 'ok' : 'ko'">
19+
can Drag: {{canDrag}}
20+
</p>
21+
<p v-else>
22+
No drag operation
23+
</p>
24+
</div> -->
25+
26+
1727
<div class="drag">
1828
<h2>List 1 draggable</h2>
19-
<draggable element="ul" class="dragArea" :list="list" :options="{group:'people'}" :validate-move="checkMove">
20-
<li v-for="(element, index) in list" >
29+
<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}"> -->
2132
{{element.name}}
2233
</li>
2334
</draggable>

‎examples/css/main.css

Lines changed: 20 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,30 @@
44
.drag {
55
background-color: green;
66
}
7-
.dragArea{
7+
.dragArea {
88
min-height: 10px;
99
}
10-
.blue{
10+
11+
.list-dragging {
1112
background-color: blue;
1213
}
14+
15+
.target {
16+
background-color: yellow;
17+
}
18+
19+
.status {
20+
height: 10px;
21+
}
22+
23+
.status .ok {
24+
background-color: green;
25+
}
26+
27+
.status .ko {
28+
background-color: red;
29+
}
30+
1331
.list-complete-item {
1432
padding: 4px;
1533
margin-top: 4px;

‎examples/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
<div id="main">
1515
<h1>Vue Draggable</h1>
1616

17-
<div :class="dragging? 'blue' : 'drag'">
17+
<div :class="dragging? 'list-dragging' : 'drag'">
1818
<h2>Draggable</h2>
1919
<draggable :list="list" @start="dragging=true" @end="dragging=false">
2020
<div v-for="element in list">{{element.name}}</div>

‎examples/script/cancel.js

Lines changed: 14 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -9,25 +9,32 @@ var vm = new Vue({
99
{name: "strawberry"},
1010
],
1111
list2: [],
12-
dragging: false
12+
dragging: false,
13+
targetElement: null,
14+
canDrag:null
1315
},
1416
methods:{
1517
checkMove: function(evt){
16-
console.log(evt)
18+
var res = true
19+
this.targetElement = evt.relatedContext.element
1720

1821
if (evt.draggedContext.element.name=='apple'){
19-
return false;
22+
res = false
2023
}
2124

2225
if (evt.relatedContext.element && evt.relatedContext.element.name=='strawberry'){
23-
return false;
26+
res = false
2427
}
2528

2629
if (evt.relatedContext.list.length==2){
27-
return false;
30+
res = false
2831
}
29-
30-
return true;
32+
this.canDrag=res;
33+
return res;
34+
},
35+
endDrag: function () {
36+
this.canDrag=null;
37+
this.targetElement=null;
3138
}
3239
}
3340
});

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@
2121
"sortablejs": "^1.5.0-rc1"
2222
},
2323
"devDependencies": {
24+
"babel-polyfill": "^6.20.0",
2425
"babel-preset-es2015": "^6.16.0",
2526
"bower": "^1.7.9",
2627
"connect": "^3.4.1",

‎src/vuedraggable.js

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@
4141

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

4646
const props = {
4747
options: Object,
@@ -58,7 +58,7 @@
5858
type: String,
5959
default: 'div'
6060
},
61-
validateMove: {
61+
move: {
6262
type: Function,
6363
default: null
6464
}
@@ -161,8 +161,7 @@
161161
const context = {list, component}
162162
if (to !== related && list && component.getUnderlyingVm) {
163163
const destination = component.getUnderlyingVm(related)
164-
Object.assign(destination, context)
165-
return destination
164+
return Object.assign(destination, context)
166165
}
167166

168167
return context
@@ -216,15 +215,15 @@
216215
},
217216

218217
onDragMove (evt) {
219-
const validate = this.validateMove
220-
if (!validate || !this.list) {
218+
const onMove = this.move
219+
if (!onMove || !this.list) {
221220
return true
222221
}
223222

224223
const relatedContext = this.getRelatedContextFromMoveEvent(evt)
225224
const draggedContext = this.context
226225
Object.assign(evt, {relatedContext, draggedContext})
227-
return validate(evt)
226+
return onMove(evt)
228227
},
229228

230229
onDragEnd (evt) {

0 commit comments

Comments
 (0)