Skip to content

Commit bcb6cb9

Browse files
dhamet70dhamet70
authored
Add files via upload
1 parent 36ae06b commit bcb6cb9

File tree

2 files changed

+166
-0
lines changed

2 files changed

+166
-0
lines changed

‎examples/09-drag-from-outside.html

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Vue Grid Layout Example 09 - Drag From Outside</title>
6+
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
7+
<link rel="stylesheet" href="app.css">
8+
9+
<style>
10+
.droppable-element {
11+
width: 150px;
12+
text-align: center;
13+
background: #fdd;
14+
border: 1px solid black;
15+
margin: 10px 0;
16+
padding: 10px;
17+
}
18+
</style>
19+
20+
</head>
21+
<body>
22+
<h1>Vue Grid Layout Example 09 - Drag From Outside</h1>
23+
24+
<a href="https://github.com/jbaysolutions/vue-grid-layout">View project on Github</a>
25+
<br/>
26+
<a href="08-responsive-predefined-layouts.html">Previous example: Responsive Predefined Layouts </a>
27+
<br/>
28+
<!--<a href="">Next example: </a>-->
29+
30+
<br/>
31+
This demo shows what happens when an item is added from outside of the grid.
32+
<br/>
33+
<br/>
34+
Once you drop the item within the grid you'll get its coordinates/properties and can perform actions with it accordingly.
35+
<br/>
36+
<br/>
37+
38+
<div id="app" style="width: 100%;">
39+
<!--<pre>{{ $data | json }}</pre>-->
40+
<div>
41+
<div class="layoutJSON">
42+
Displayed as <code>[x, y, w, h]</code>:
43+
<div class="columns">
44+
<div class="layoutItem" v-for="item in layout">
45+
<b>{{item.i}}</b>: [{{item.x}}, {{item.y}}, {{item.w}}, {{item.h}}]
46+
</div>
47+
</div>
48+
</div>
49+
</div>
50+
<br/>
51+
<div @dragstart="dragstart" @drag="drag" @dragend="dragend" class="droppable-element" draggable="true" unselectable="on">Droppable Element (Drag me!)</div>
52+
<div id="content">
53+
<grid-layout ref="gridLayout" :layout.sync="layout"
54+
:col-num="12"
55+
:row-height="30"
56+
:is-draggable="true"
57+
:is-resizable="true"
58+
:vertical-compact="true"
59+
:use-css-transforms="true"
60+
61+
>
62+
<grid-item :key="item.i" v-for="item in layout"
63+
:x="item.x"
64+
:y="item.y"
65+
:w="item.w"
66+
:h="item.h"
67+
:i="item.i"
68+
>
69+
<span class="text">{{item.i}}</span>
70+
</grid-item>
71+
</grid-layout>
72+
</div>
73+
</div>
74+
<script src="vue.min.js"></script>
75+
<script src="../dist/vue-grid-layout.umd.min.js"></script>
76+
<script src="09-drag-from-outside.js"></script>
77+
</body>
78+
</html>

‎examples/09-drag-from-outside.js

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
var testLayout = [
2+
{"x":0,"y":0,"w":2,"h":2,"i":"0"},
3+
{"x":2,"y":0,"w":2,"h":4,"i":"1"},
4+
{"x":4,"y":0,"w":2,"h":5,"i":"2"},
5+
{"x":6,"y":0,"w":2,"h":3,"i":"3"},
6+
{"x":8,"y":0,"w":2,"h":3,"i":"4"},
7+
{"x":10,"y":0,"w":2,"h":3,"i":"5"},
8+
{"x":0,"y":5,"w":2,"h":5,"i":"6"},
9+
{"x":2,"y":5,"w":2,"h":5,"i":"7"},
10+
{"x":4,"y":5,"w":2,"h":5,"i":"8"},
11+
{"x":5,"y":10,"w":4,"h":3,"i":"9"},
12+
];
13+
14+
let DragPos = {"x":null,"y":null,"w":1,"h":1,"i":null};
15+
new Vue({
16+
el: '#app',
17+
data: {
18+
layout: testLayout,
19+
},
20+
methods: {
21+
dragstart:function(e){
22+
},
23+
drag:function(e){
24+
25+
let parentRect = document.getElementById('content').getBoundingClientRect();
26+
let mouseInGrid=false;
27+
if (((e.x>parentRect.left) && (e.x<parentRect.right)) && ((e.y>parentRect.top) && (e.y<parentRect.bottom))){
28+
mouseInGrid=true;
29+
}
30+
if (mouseInGrid==true && (this.layout.findIndex(item => item.i === 'drop')) == -1){
31+
this.layout.push({
32+
x: (this.layout.length * 2) % (this.colNum || 12),
33+
y: this.layout.length + (this.colNum || 12), // puts it at the bottom
34+
w: 1,
35+
h: 1,
36+
i: 'drop',
37+
});
38+
}
39+
let index=this.layout.findIndex(item => item.i === 'drop');
40+
if (index!=-1){
41+
try {
42+
this.$refs.gridLayout.$children[this.layout.length].$refs.item.style.display="none";
43+
} catch {
44+
}
45+
let el=this.$refs.gridLayout.$children[index];
46+
el.dragging={"top":e.y-parentRect.top,"left":e.x-parentRect.left};
47+
let new_pos=el.calcXY(e.y-parentRect.top, e.x-parentRect.left);
48+
49+
if (mouseInGrid==true){
50+
this.$refs.gridLayout.dragEvent('dragstart', 'drop', new_pos.x,new_pos.y,1,1);
51+
DragPos.i=String(index); DragPos.x=this.layout[index].x; DragPos.y=this.layout[index].y;
52+
}
53+
if (mouseInGrid==false){
54+
this.$refs.gridLayout.dragEvent('dragend', 'drop', new_pos.x,new_pos.y,1,1);
55+
this.layout = this.layout.filter(obj => obj.i !=='drop');
56+
}
57+
}
58+
59+
},
60+
dragend:function(e){
61+
let parentRect = document.getElementById('content').getBoundingClientRect();
62+
let mouseInGrid=false;
63+
if (((e.x>parentRect.left) && (e.x<parentRect.right)) && ((e.y>parentRect.top) && (e.y<parentRect.bottom))){
64+
mouseInGrid=true;
65+
}
66+
if (mouseInGrid==true){
67+
alert(`Dropped element props:\n${JSON.stringify(DragPos, ['x', 'y', 'w', 'h'], 2)}`);
68+
69+
// UNCOMMENT below if you want to add a GridLayout item
70+
/*
71+
this.layout.push({
72+
x: DragPos.x,
73+
y: DragPos.y,
74+
w: 1,
75+
h: 1,
76+
i: DragPos.i,
77+
});
78+
this.$refs.gridLayout.dragEvent('dragend', DragPos.i, DragPos.x,DragPos.y,1,1);
79+
try {
80+
this.$refs.gridLayout.$children[this.layout.length].$refs.item.style.display="block";
81+
} catch {
82+
}
83+
*/
84+
}
85+
},
86+
},
87+
});
88+

0 commit comments

Comments
 (0)