Skip to content
GitLab
Explore
Sign in
Primary navigation
Search or go to…
Project
V
vue-draggable-grid
Manage
Activity
Members
Labels
Plan
Issues
Issue boards
Milestones
Code
Merge requests
Repository
Branches
Commits
Tags
Repository graph
Compare revisions
Build
Pipelines
Jobs
Pipeline schedules
Artifacts
Deploy
Releases
Package Registry
Model registry
Operate
Terraform modules
Monitor
Service Desk
Analyze
Model experiments
Help
Help
Support
GitLab documentation
Compare GitLab plans
Community forum
Contribute to GitLab
Provide feedback
Terms and privacy
Keyboard shortcuts
?
Snippets
Groups
Projects
Show more breadcrumbs
AlekSIS®
Libraries
vue-draggable-grid
Commits
93265cb3
Verified
Commit
93265cb3
authored
1 year ago
by
Julian
Committed by
Jonathan Weth
1 year ago
Browse files
Options
Downloads
Patches
Plain Diff
Create Example for isDraggedOver and containerDrag events
parent
6a4329ae
No related branches found
Branches containing commit
No related tags found
1 merge request
!15
Resolve "Overview over dragged elements"
Changes
2
Hide whitespace changes
Inline
Side-by-side
Showing
2 changed files
example/src/App.vue
+10
-0
10 additions, 0 deletions
example/src/App.vue
example/src/ExampleAOverlay.vue
+268
-0
268 additions, 0 deletions
example/src/ExampleAOverlay.vue
with
278 additions
and
0 deletions
example/src/App.vue
+
10
−
0
View file @
93265cb3
...
...
@@ -8,6 +8,7 @@ import Example6Disabled from "./Example6Disabled.vue";
import
Example7DisabledItems
from
"
./Example7DisabledItems.vue
"
;
import
Example8Responsive
from
"
./Example8Responsive.vue
"
;
import
Example9MultipleItemsY
from
"
./Example9MultipleItemsY.vue
"
;
import
ExampleAOverlay
from
"
./ExampleAOverlay.vue
"
;
</
script
>
<
template
>
...
...
@@ -96,6 +97,15 @@ import Example9MultipleItemsY from "./Example9MultipleItemsY.vue";
width of every item has to be
<kbd>
1
</kbd>
)
</p>
<example9-multiple-items-y
/>
<h2>
Example 10:
</h2>
<p>
This example shows, how one can find out, if the user is dragging an item,
which item is being dragged and which grid is being dragged over. This is
an example for the proper
<kbd>
isDraggedOver
</kbd>
and the
<kbd>
containerDragStart
</kbd>
and
<kbd>
containerDragEnd
</kbd>
events.
</p>
<example-a-overlay
/>
</div>
</
template
>
...
...
This diff is collapsed.
Click to expand it.
example/src/ExampleAOverlay.vue
0 → 100644
+
268
−
0
View file @
93265cb3
<
script
>
function
initialState
()
{
return
{
items
:
[
{
key
:
"
key1
"
,
x
:
1
,
y
:
5
,
w
:
1
,
h
:
1
,
data
:
{
name
:
"
Cat
"
,
grid
:
false
},
},
{
key
:
"
key2
"
,
x
:
4
,
y
:
3
,
w
:
1
,
h
:
1
,
data
:
{
name
:
"
Penguin
"
,
grid
:
false
},
},
{
key
:
"
key3
"
,
x
:
2
,
y
:
3
,
w
:
1
,
h
:
1
,
data
:
{
name
:
"
Dog
"
,
grid
:
false
},
},
{
key
:
"
key4
"
,
x
:
5
,
y
:
4
,
w
:
1
,
h
:
1
,
data
:
{
name
:
"
Chinchilla
"
,
grid
:
false
},
},
{
key
:
"
key5
"
,
x
:
5
,
y
:
1
,
w
:
1
,
h
:
1
,
data
:
{
name
:
"
Iguana
"
,
grid
:
false
},
},
{
key
:
"
key6
"
,
x
:
3
,
y
:
4
,
w
:
1
,
h
:
1
,
data
:
{
name
:
"
Axolotl
"
,
grid
:
true
},
disabled
:
true
,
},
],
overlays
:
[
{
key
:
"
overlay1
"
,
x
:
2
,
y
:
2
,
animal
:
"
Dog
"
},
{
key
:
"
overlay2
"
,
x
:
3
,
y
:
5
,
animal
:
"
Iguana
"
},
{
key
:
"
overlay3
"
,
x
:
4
,
y
:
2
,
animal
:
"
Chinchilla
"
},
{
key
:
"
overlay4
"
,
x
:
2
,
y
:
4
,
animal
:
"
Penguin
"
},
{
key
:
"
overlay5
"
,
x
:
4
,
y
:
4
,
animal
:
"
Cat
"
},
],
dragged
:
{
key1
:
false
,
key2
:
false
,
key3
:
false
,
key4
:
false
,
key5
:
false
,
key6
:
false
,
},
showOverlayOnlyOnDragover
:
false
,
showAllHighlights
:
false
,
};
}
export
default
{
name
:
"
ExampleAOverlay
"
,
data
()
{
return
initialState
();
},
methods
:
{
handleItemChanged
(
element
,
gridId
)
{
if
(
gridId
===
"
second-grid
"
&&
element
.
originGridId
===
"
second-grid
"
)
{
// Disable movement inside the second grid
return
;
}
let
overlay
=
this
.
overlays
.
find
((
o
)
=>
o
.
animal
===
element
.
data
.
name
);
this
.
items
.
map
((
item
)
=>
{
if
(
item
.
key
===
element
.
key
)
{
item
.
data
.
grid
=
gridId
===
"
ov-grid
"
;
item
.
x
=
element
.
x
;
item
.
y
=
element
.
y
;
item
.
disabled
=
overlay
&&
overlay
.
x
===
element
.
x
&&
overlay
.
y
===
element
.
y
;
}
return
item
;
});
if
(
overlay
&&
overlay
.
x
===
element
.
x
&&
overlay
.
y
===
element
.
y
)
{
this
.
overlays
=
this
.
overlays
.
filter
((
o
)
=>
o
.
key
!==
overlay
.
key
);
}
},
reset
()
{
Object
.
assign
(
this
.
$data
,
initialState
());
},
handleContainerDrag
(
element
,
type
)
{
this
.
dragged
[
element
.
key
]
=
type
===
"
start
"
;
},
},
computed
:
{
gridOneItems
()
{
return
this
.
items
.
filter
((
item
)
=>
item
.
data
.
grid
);
},
gridTwoItems
()
{
return
this
.
items
.
filter
((
item
)
=>
!
item
.
data
.
grid
)
.
map
((
item
)
=>
({
...
item
,
x
:
()
=>
0
,
y
:
()
=>
0
,
disabled
:
false
,
}));
},
computedOverlays
()
{
if
(
this
.
showAllHighlights
)
{
return
Object
.
values
(
this
.
dragged
).
some
((
obj
)
=>
!!
obj
)
?
this
.
overlays
:
[];
}
return
this
.
overlays
.
filter
(
(
o
)
=>
this
.
dragged
[
((
a
)
=>
(
a
?
a
.
key
:
a
))(
// Get the key of the dragged item or null
this
.
items
.
find
((
item
)
=>
item
.
data
.
name
===
o
.
animal
),
)
],
);
},
},
};
</
script
>
<
template
>
<div>
<drag-grid
:value=
"gridOneItems"
:cols=
"5"
:rows=
"5"
id=
"ov-grid"
context=
"animals"
grid-id=
"ov-grid"
@
itemChanged=
"handleItemChanged($event, 'ov-grid')"
@
containerDragStart=
"handleContainerDrag($event, 'start')"
@
containerDragEnd=
"handleContainerDrag($event, 'end')"
>
<template
#item
="
{ rawItem }">
<div
:class=
"
{ container: true, disabled: rawItem.disabled }">
<span>
{{
rawItem
.
data
.
name
}}
</span>
</div>
</
template
>
<
template
#default=
"{ isDraggedOver }"
>
<div
class=
"container goal"
v-for=
"goal in computedOverlays"
v-show=
"isDraggedOver || !showOverlayOnlyOnDragover"
:key=
"goal.key"
:style=
"
{
gridColumn: goal.x + ' / span 1',
gridRow: goal.y + ' / span 1',
}"
>
{{
goal
.
animal
}}
here!
</div>
</
template
>
</drag-grid>
<drag-grid
:value=
"gridTwoItems"
:cols=
"1"
:rows=
"5"
id=
"second-grid"
context=
"animals"
grid-id=
"second-grid"
no-highlight
@
itemChanged=
"handleItemChanged($event, 'second-grid')"
@
containerDragStart=
"handleContainerDrag($event, 'start')"
@
containerDragEnd=
"handleContainerDrag($event, 'end')"
>
<
template
#item=
"{ rawItem }"
>
<div
:class=
"
{ container: true, disabled: rawItem.disabled }">
<span>
{{
rawItem
.
data
.
name
}}
</span>
</div>
</
template
>
</drag-grid>
<span>
<button
@
click=
"reset"
>
Reset
</button><br
/>
<button
@
click=
"showOverlayOnlyOnDragover = !showOverlayOnlyOnDragover"
>
Show overlay
{{ showOverlayOnlyOnDragover ? "always" : "only on dragover" }}
</button
><br
/>
<button
@
click=
"showAllHighlights = !showAllHighlights"
>
{{
showAllHighlights
? "Only show overlay for dragged item"
: "Show overlay for all items"
}}
</button>
</span>
</div>
</template>
<
style
scoped
>
#ov-grid
,
#second-grid
{
max-width
:
600px
;
border-radius
:
1em
;
border
:
0.2em
solid
#e0e0e0
;
box-shadow
:
0.2em
0.2em
0
0.1em
#bdc3c7
;
padding
:
0.3em
0.4em
0.4em
0.3em
;
}
#second-grid
{
width
:
fit-content
;
height
:
100%
;
}
div
{
display
:
flex
;
flex-direction
:
row
;
gap
:
1em
;
align-items
:
stretch
;
}
.container
{
background
:
#3498db
;
color
:
#ecf0f1
;
width
:
100%
;
height
:
100%
;
user-select
:
none
;
text-align
:
center
;
border-radius
:
0.6em
;
box-shadow
:
#2980b9
0.1em
0.1em
0
0.1em
;
min-height
:
3rem
;
display
:
flex
;
justify-content
:
center
;
align-items
:
center
;
}
.container.disabled
{
background
:
#bdc3c7
;
box-shadow
:
#95a5a6
0.1em
0.1em
0
0.1em
;
}
.container.goal
{
background
:
#2ecc71
;
box-shadow
:
#27ae60
0.1em
0.1em
0
0.1em
;
}
button
{
margin-top
:
1em
;
padding
:
0.5em
1em
;
border-radius
:
0.5em
;
border
:
0.2em
solid
#e0e0e0
;
background
:
#ecf0f1
;
color
:
#3498db
;
font-weight
:
bold
;
cursor
:
pointer
;
}
</
style
>
This diff is collapsed.
Click to expand it.
Preview
0%
Loading
Try again
or
attach a new file
.
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Save comment
Cancel
Please
register
or
sign in
to comment