Skip to content

Commit 63de065

Browse files
dhamet70dhamet70
authored
Add files via upload
1 parent 2b4d6a2 commit 63de065

File tree

2 files changed

+181
-0
lines changed

2 files changed

+181
-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 @drag="drag" @dragstart="dragstart" @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: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
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+
new Vue({
15+
el: '#app',
16+
data: {
17+
layout: testLayout,
18+
},
19+
methods: {
20+
drag:function(e){
21+
let divGridLayout=document.getElementById('content'),
22+
divGridLayout_left = divGridLayout.getBoundingClientRect().left + divGridLayout.ownerDocument.defaultView.pageXOffset-window.window.scrollX,
23+
divGridLayout_top = divGridLayout.getBoundingClientRect().top + divGridLayout.ownerDocument.defaultView.pageYOffset-window.window.scrollY,
24+
divGridLayout_width = divGridLayout.getBoundingClientRect().width,
25+
divGridLayout_height = divGridLayout.getBoundingClientRect().height
26+
;
27+
let mouseInGrid=false;
28+
if (((e.x>divGridLayout_left) && (e.x<divGridLayout_left+divGridLayout_width))
29+
&& ((e.y>divGridLayout_top) && (e.y<divGridLayout_top+divGridLayout_height)))
30+
mouseInGrid=true;
31+
32+
if (mouseInGrid==true && (this.layout.findIndex(item => item.i === 'drop')) == -1){
33+
this.layout.push({
34+
x: (this.layout.length * 2) % (this.colNum || 12),
35+
y: this.layout.length + (this.colNum || 12), // puts it at the bottom
36+
w: 1,
37+
h: 1,
38+
i: 'drop',
39+
});
40+
}
41+
setTimeout(() => {
42+
let index=this.layout.findIndex(item => item.i === 'drop');
43+
if (index!=-1){
44+
this.$refs.gridLayout.$children[this.layout.length].$refs.item.style.display="none";
45+
let el=this.$refs.gridLayout.$children[index];
46+
47+
el.dragging={"left":e.x-divGridLayout_left,"top":e.y-divGridLayout_top};
48+
let new_pos=el.calcXY(e.y-divGridLayout_top, e.x-divGridLayout_left);
49+
50+
if (mouseInGrid==true){
51+
this.$refs.gridLayout.dragEvent('dragstart', 'drop', new_pos.x,new_pos.y,1,1);
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+
}, 100);
59+
},
60+
dragstart:function(e){
61+
e.dataTransfer.setData('text/plain', '');
62+
},
63+
dragend:function(e){
64+
let divGridLayout=document.getElementById('content'),
65+
divGridLayout_left = divGridLayout.getBoundingClientRect().left + divGridLayout.ownerDocument.defaultView.pageXOffset-window.window.scrollX,
66+
divGridLayout_top = divGridLayout.getBoundingClientRect().top + divGridLayout.ownerDocument.defaultView.pageYOffset-window.window.scrollY,
67+
divGridLayout_width = divGridLayout.getBoundingClientRect().width,
68+
divGridLayout_height = divGridLayout.getBoundingClientRect().height
69+
;
70+
let mouseInGrid=false;
71+
if (((e.x>divGridLayout_left) && (e.x<divGridLayout_left+divGridLayout_width))
72+
&& ((e.y>divGridLayout_top) && (e.y<divGridLayout_top+divGridLayout_height)))
73+
mouseInGrid=true;
74+
75+
if (mouseInGrid==true){
76+
let el=this.$refs.gridLayout.$children[this.layout.length];
77+
el.dragging={"left":e.x-divGridLayout_left,"top":e.y-divGridLayout_top};
78+
let new_pos=el.calcXY(e.y-divGridLayout_top, e.x-divGridLayout_left);
79+
this.$refs.gridLayout.dragEvent('dragend', 'drop', new_pos.x,new_pos.y,1,1);
80+
index=this.layout.length;
81+
82+
alert(`Dropped element props:\n${JSON.stringify(this.$refs.gridLayout.$children[index], ['x', 'y', 'w', 'h'], 2)}`);
83+
84+
/* UNCOMMENT the bottom lines IF YOU WANT to add an item */
85+
/*
86+
x=this.$refs.gridLayout.$children[index].x;
87+
y=this.$refs.gridLayout.$children[index].y;
88+
this.layout.push({
89+
x: x,
90+
y: y,
91+
w: 1,
92+
h: 1,
93+
i: String(index-1),
94+
});
95+
setTimeout(() => {
96+
this.$refs.gridLayout.$children[this.layout.length].$refs.item.style.display="block";
97+
}, 100);
98+
*/
99+
}
100+
},
101+
},
102+
});
103+

0 commit comments

Comments
 (0)