This repository has been archived by the owner on Aug 25, 2020. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 71
/
Copy pathexample.html
108 lines (108 loc) · 3.61 KB
/
example.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Vue.js Drag And Drop</title>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<style>
/* Prevent the text contents of draggable elements from being selectable. */
[draggable] {
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
user-select: none;
}
li {
color: black;
}
.dragging {
opacity: 0.8;
color: #6894D1;
}
.drag-over {
outline: 1px solid red;
}
.drag-enter {
color: #C93742;
}
</style>
</head>
<body>
<div class="container" id="app">
<h3>Some Tasks</h3>
<ul>
<li v-for="task in tasks" v-bind:id="task.id"
v-drag-and-drop
v-on:drag-start="handleDragStart"
v-on:drag-over="handleDragOver"
v-on:drag-enter="handleDragEnter"
v-on:drag-leave="handleDragLeave"
v-on:drag-end="handleDragEnd"
v-on:drop="handleDrop"
v-on:drag="handleDrag"
>
<input type="checkbox" name="completed[]" value="1" v-bind:checked="task.completed">
<strong v-text="task.title"></strong>
</li>
</ul>
<pre v-text="loggedEvent"></pre>
<h3>Some Images</h3>
<div class="image" v-for="(image, index) in images" v-drag-and-drop v-on:drag="handleDrag" v-on:drop="handleImageDrop">
<img src="" v-bind:src="image.src" v-bind:id="index" v-bind:title="image.name" align="left">
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script>
<script src="vue.drag-and-drop.js"></script>
<script>
/* globals Vue */
new Vue({
el: '#app',
data: {
currentlyDragging: null,
loggedEvent: '',
tasks: [{id:96,title:'Task 8',completed:false},{id:12,title:'Task 1',completed:true},{id:24,title:'Task 2',completed:false},{id:36,title:'Task 3',completed:true},{id:48,title:'Task 4',completed:false},{id:60,title:'Task 5',completed:true},{id:72,title:'Task 6',completed:false},{id:84,title:'Task 7',completed:true},{id:0,title:'Task 0',completed:false},{id:108,title:'Task 9',completed:true}],
images: [{name:'Image 1',src:'http://placehold.it/100/000000/ffffff'},{name:'Image 2',src:'http://placehold.it/100/C93742/ffffff'},{name:'Image 3',src:'http://placehold.it/100/6894D1/ffffff'}]
},
methods: {
handleDragStart: function (e) {
console.log('handleDragStart', e);
this.loggedEvent = 'handleDragStart';
},
handleDragOver: function (e) {
console.log('handleDragOver', e);
this.loggedEvent = 'handleDragOver';
},
handleDragEnter: function (e) {
console.log('handleDragEnter', e);
this.loggedEvent = 'handleDragEnter';
},
handleDragLeave: function (e) {
console.log('handleDragLeave', e);
this.loggedEvent = 'handleDragLeave';
},
handleDragEnd: function (e) {
console.log('handleDragEnd', e);
this.loggedEvent = 'handleDragEnd';
},
handleDrop: function (e) {
console.log('handleDrop', this.currentlyDragging, e.target);
this.currentlyDragging = null;
this.loggedEvent = 'handleDrop';
},
handleImageDrop: function (e) {
console.log('handleImageDrop', this.currentlyDragging, e.target);
this.currentlyDragging = null;
this.loggedEvent = 'handleImageDrop';
},
handleDrag: function (e) {
console.log('handleDrag', e);
this.loggedEvent = 'handleDrag';
if (!this.currentlyDragging) {
this.currentlyDragging = e.srcElement;
}
}
}
});
</script>
</body>
</html>