Skip to content

Commit a1244e8

Browse files
author
pc-david\david.desmaisons
committed
First implementation of issue #33 solution
1 parent 4c636a7 commit a1244e8

File tree

5 files changed

+124
-27
lines changed

5 files changed

+124
-27
lines changed

‎dist/vuedraggable.js‎

Lines changed: 24 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
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+
35
(function () {
46
"use strict";
57

@@ -97,19 +99,7 @@
9799
return h(this.element, null, this.$slots.default);
98100
},
99101
mounted: function mounted() {
100-
var _this2 = this;
101-
102-
var optionsAdded = {};
103-
['Start', 'Add', 'Remove', 'Update', 'End'].forEach(function (elt) {
104-
optionsAdded['on' + elt] = delegateAndEmit.call(_this2, elt);
105-
});
106-
107-
['Choose', 'Sort', 'Filter', 'Move', 'Clone'].forEach(function (elt) {
108-
optionsAdded['on' + elt] = emit.bind(_this2, elt);
109-
});
110-
111-
var options = merge(this.options, optionsAdded);
112-
this._sortable = new Sortable(this.rootContainer, options);
102+
this._sortable = new Sortable(this.rootContainer, this.computedOptions);
113103
this.computeIndexes();
114104
},
115105
beforeDestroy: function beforeDestroy() {
@@ -123,6 +113,26 @@
123113
computed: {
124114
rootContainer: function rootContainer() {
125115
return this.transitionMode ? this.$el.children[0] : this.$el;
116+
},
117+
computedOptions: function computedOptions() {
118+
var _this2 = this;
119+
120+
var optionsAdded = {};
121+
['Start', 'Add', 'Remove', 'Update', 'End'].forEach(function (elt) {
122+
optionsAdded['on' + elt] = delegateAndEmit.call(_this2, elt);
123+
});
124+
125+
['Choose', 'Sort', 'Filter', 'Move', 'Clone'].forEach(function (elt) {
126+
optionsAdded['on' + elt] = emit.bind(_this2, elt);
127+
});
128+
129+
return merge(this.options, optionsAdded);
130+
}
131+
},
132+
133+
watch: {
134+
computedOptions: function computedOptions(newValue) {
135+
this._sortable(this.rootContainer, newValue);
126136
}
127137
},
128138

@@ -194,7 +204,7 @@
194204
return draggableComponent;
195205
}
196206

197-
if (typeof exports == "object") {
207+
if ((typeof exports === 'undefined' ? 'undefined' : _typeof(exports)) == "object") {
198208
var Sortable = require("sortablejs");
199209
module.exports = buildDraggable(Sortable);
200210
} else if (typeof define == "function" && define.amd) {

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

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
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>Basic example</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 class="container-fluid" id="app">
15+
<button @click="test">click here</button>
16+
<div v-for="machine in machines">
17+
18+
<div class="container-fluid machine-contents">
19+
20+
<draggable :list="machine.jobs" :options="{'disabled':edit}" @update="update">
21+
<transition-group name="list-complete">
22+
<div v-for="(job, index) in machine.jobs" v-bind:key="job.jobNumber" class="list-complete-item">
23+
<div>
24+
{{ job.jobNumber }}
25+
</div>
26+
<div>
27+
<br>
28+
<button v-on:click="removeJob(machine.id, job.jobNumber, machine.jobs, index)">Remove</button>
29+
</div>
30+
</div>
31+
</transition-group>
32+
</draggable>
33+
34+
</div>
35+
36+
</div>
37+
38+
</div>
39+
40+
<script type="text/javascript" src="..\libs\vue\dist\vue.js"></script>
41+
<script type="text/javascript" src="..\libs\Sortable\Sortable.js"></script>
42+
<script type="text/javascript" src="src\vuedraggable.js"></script>
43+
<script type="text/javascript" src="script\disable.js"></script>
44+
</body>
45+
</html>

‎examples/script/disable.js‎

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

‎src/vuedraggable.js‎

Lines changed: 23 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -89,17 +89,7 @@
8989
},
9090

9191
mounted () {
92-
var optionsAdded = {};
93-
['Start', 'Add', 'Remove', 'Update', 'End'].forEach( elt => {
94-
optionsAdded['on' + elt] = delegateAndEmit.call(this, elt)
95-
});
96-
97-
['Choose', 'Sort', 'Filter', 'Move', 'Clone'].forEach( elt => {
98-
optionsAdded['on' + elt] = emit.bind(this, elt)
99-
});
100-
101-
const options = merge(this.options, optionsAdded)
102-
this._sortable = new Sortable(this.rootContainer, options)
92+
this._sortable = new Sortable(this.rootContainer, this.computedOptions)
10393
this.computeIndexes()
10494
},
10595

@@ -113,7 +103,28 @@
113103

114104
computed : {
115105
rootContainer () {
116-
return this.transitionMode? this.$el.children[0] : this.$el
106+
return this.transitionMode? this.$el.children[0] : this.$el;
107+
},
108+
109+
computedOptions () {
110+
var optionsAdded = {};
111+
['Start', 'Add', 'Remove', 'Update', 'End'].forEach( elt => {
112+
optionsAdded['on' + elt] = delegateAndEmit.call(this, elt)
113+
});
114+
115+
['Choose', 'Sort', 'Filter', 'Move', 'Clone'].forEach( elt => {
116+
optionsAdded['on' + elt] = emit.bind(this, elt)
117+
});
118+
119+
return merge(this.options, optionsAdded);
120+
}
121+
},
122+
123+
watch: {
124+
computedOptions (newValue){
125+
for(var property in newValue){
126+
this._sortable.option(property, newValue[property]);
127+
}
117128
}
118129
},
119130

0 commit comments

Comments
 (0)