Skip to content

Commit 44ad220

Browse files
David-DesmaisonsDavid-Desmaisons
committed
Adding support to transaction-group issue 24
1 parent b88e7f5 commit 44ad220

File tree

6 files changed

+234
-106
lines changed

6 files changed

+234
-106
lines changed

‎dist/vuedraggable.js‎

Lines changed: 28 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
'use strict';
22

3-
var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
4-
53
(function () {
64
"use strict";
75

@@ -31,6 +29,9 @@ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol
3129
}
3230

3331
function _computeIndexes(slots, children) {
32+
if (!slots) {
33+
return [];
34+
}
3435
return Array.prototype.map.call(children, function (elt) {
3536
return computeVmIndex(slots, elt);
3637
});
@@ -81,7 +82,18 @@ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol
8182
var draggableComponent = {
8283
props: props,
8384

85+
data: function data() {
86+
return {
87+
transitionMode: false
88+
};
89+
},
8490
render: function render(h) {
91+
if (this.$slots.default.length === 1) {
92+
var child = this.$slots.default[0];
93+
if (child.componentOptions && child.componentOptions.tag === "transition-group") {
94+
this.transitionMode = true;
95+
}
96+
}
8597
return h(this.element, null, this.$slots.default);
8698
},
8799
mounted: function mounted() {
@@ -97,7 +109,7 @@ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol
97109
});
98110

99111
var options = merge(this.options, optionsAdded);
100-
this._sortable = new Sortable(this.$el, options);
112+
this._sortable = new Sortable(this.rootContainer, options);
101113
this.computeIndexes();
102114
},
103115
beforeDestroy: function beforeDestroy() {
@@ -108,19 +120,29 @@ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol
108120
},
109121

110122

123+
computed: {
124+
rootContainer: function rootContainer() {
125+
return this.transitionMode ? this.$el.children[0] : this.$el;
126+
}
127+
},
128+
111129
methods: {
130+
getChildrenNodes: function getChildrenNodes() {
131+
var rawNodes = this.$slots.default;
132+
return this.transitionMode ? rawNodes[0].child.$slots.default : rawNodes;
133+
},
112134
computeIndexes: function computeIndexes() {
113135
var _this3 = this;
114136

115137
this.$nextTick(function () {
116-
_this3.visibleIndexes = _computeIndexes(_this3.$slots.default, _this3.$el.children);
138+
_this3.visibleIndexes = _computeIndexes(_this3.getChildrenNodes(), _this3.rootContainer.children);
117139
});
118140
},
119141
onDragStart: function onDragStart(evt) {
120142
if (!this.list) {
121143
return;
122144
}
123-
var currentIndex = computeVmIndex(this.$slots.default, evt.item);
145+
var currentIndex = computeVmIndex(this.getChildrenNodes(), evt.item);
124146
var element = this.list[currentIndex];
125147
this.context = {
126148
currentIndex: currentIndex,
@@ -145,7 +167,7 @@ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol
145167
if (!this.list) {
146168
return;
147169
}
148-
insertNodeAt(this.$el, evt.item, evt.oldIndex);
170+
insertNodeAt(this.rootContainer, evt.item, evt.oldIndex);
149171
var isCloning = !!evt.clone;
150172
if (isCloning) {
151173
removeNode(evt.clone);
@@ -169,7 +191,6 @@ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol
169191
}
170192
}
171193
};
172-
173194
return draggableComponent;
174195
}
175196

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

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<!doctype html>
2+
<html class="no-js" lang="">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta http-equiv="x-ua-compatible" content="ie=edge">
6+
<title>Example ul element</title>
7+
<meta name="description" content="">
8+
<meta name="viewport" content="width=device-width, initial-scale=1">
9+
10+
<link rel="stylesheet" href="css/main.css">
11+
</head>
12+
<body>
13+
14+
<div id="main">
15+
<div v-for="machine in machines">
16+
<div class="container-fluid machine-contents">
17+
<draggable :list="machine.jobs">
18+
<transition-group name="list-complete">
19+
<div v-for="(job, index) in machine.jobs" :key="job.jobNumber" class="list-complete-item">
20+
<div>
21+
{{ job.jobNumber }}
22+
</div>
23+
<div>
24+
<br>
25+
<button v-on:click="removeJob(machine.id, job.jobNumber, machine.jobs, index)">Remove</button>
26+
</div>
27+
</div>
28+
</transition-group>
29+
</draggable>
30+
</div>
31+
</div>
32+
</div>
33+
<script type="text/javascript" src="..\libs\vue\dist\vue.js"></script>
34+
<script type="text/javascript" src="..\libs\lodash\lodash.js"></script>
35+
<script type="text/javascript" src="..\libs\Sortable\Sortable.js"></script>
36+
<script type="text/javascript" src="src\vuedraggable.js"></script>
37+
<script type="text/javascript" src="script\transition.js"></script>
38+
</body>
39+
</html>

‎examples/css/main.css‎

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,4 +9,19 @@
99
}
1010
.blue{
1111
background-color: blue;
12-
}
12+
}
13+
.list-complete-item {
14+
padding: 4px;
15+
margin-top: 4px;
16+
border: solid 1px;
17+
transition: all 1s;
18+
height: 60px;
19+
}
20+
21+
.list-complete-enter, .list-complete-leave-active {
22+
opacity: 0;
23+
height: 0px;
24+
margin-top: 0px;
25+
padding: 0px;
26+
border: solid 0px;
27+
}

‎examples/script/transition.js‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
var vm = new Vue({
2+
el: '#main',
3+
name: 'mfgActivity',
4+
data: {
5+
machines: [
6+
{
7+
name: "H1",
8+
id: 1,
9+
jobs: [
10+
{
11+
jobNumber: "14037-12"
12+
},
13+
{
14+
jobNumber: "14038-13"
15+
},
16+
{
17+
jobNumber: "14048-15"
18+
}
19+
]
20+
}
21+
]
22+
},
23+
methods: {
24+
removeJob: function(machineId, jobNumber, jobs, index) {
25+
// Remove job from GUI
26+
jobs.splice(index, 1);
27+
}
28+
}
29+
})

0 commit comments

Comments
 (0)