Skip to content

Commit f8cefd0

Browse files
gmsagmsa
authored
Merge pull request jbaysolutions#466 from dhamet70/master
Added Drag from Outside example page
2 parents 4020b6c + 4fd9e85 commit f8cefd0

File tree

2 files changed

+170
-0
lines changed

2 files changed

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

0 commit comments

Comments
 (0)