archive-gh-me/draggable
1
0
Fork 0
mirror of https://github.com/Shopify/draggable.git synced 2025-12-08 20:15:56 +00:00
Code Issues Projects Releases Wiki Activity

update Examples for latest Droppable API changes

Browse Source
This commit is contained in:
beefchimi 2018-03-28 22:44:33 -04:00 committed by Max Hoffmann
parent fa9d27bd6d
commit dfb37a3f9b
No known key found for this signature in database
GPG Key ID: 1DFA4D13DD27A676
6 changed files with 18 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
examples/src/components/Block/variants.scss
View File

@ -149,7 +149,7 @@
.BlockWrapper {
position: relative;
&.draggable-droppable--occupied {
&.draggable-dropzone--occupied {
.Block--typeHollow,
.Block--typeStripes {
@include position-cover;

16
examples/src/content/Droppable/UniqueDropzone/UniqueDropzone.html
View File

@ -3,35 +3,35 @@
{% macro render(id) %}
<section id="{{ id }}" class="{{ id }}">
<article class="BlockLayout BlockLayout--typeFlex">
<div class="BlockWrapper BlockWrapper--isDroppable draggable-droppable--occupied" data-droppable="1">
<div class="BlockWrapper BlockWrapper--isDropzone draggable-dropzone--occupied" data-dropzone="1">
{{ Block.render('one', {type: 'Hollow'}) }}
{{ Block.render('one', {index: 1, draggable: true}) }}
</div>
<div class="BlockWrapper BlockWrapper--isDroppable draggable-droppable--occupied" data-droppable="2">
<div class="BlockWrapper BlockWrapper--isDropzone draggable-dropzone--occupied" data-dropzone="2">
{{ Block.render('two', {type: 'Hollow'}) }}
{{ Block.render('two', {index: 2, draggable: true}) }}
</div>
<div class="BlockWrapper BlockWrapper--isDroppable draggable-droppable--occupied" data-droppable="4">
<div class="BlockWrapper BlockWrapper--isDropzone draggable-dropzone--occupied" data-dropzone="4">
{{ Block.render('four', {type: 'Hollow'}) }}
{{ Block.render('four', {index: 4, draggable: true}) }}
</div>
<div class="BlockWrapper BlockWrapper--isDroppable draggable-droppable--occupied" data-droppable="8">
<div class="BlockWrapper BlockWrapper--isDropzone draggable-dropzone--occupied" data-dropzone="8">
{{ Block.render('eight', {type: 'Hollow'}) }}
{{ Block.render('eight', {index: 8, draggable: true}) }}
</div>
</article>
<article class="BlockLayout BlockLayout--typeGrid">
<div class="BlockWrapper BlockWrapper--isDroppable" data-droppable="1">
<div class="BlockWrapper BlockWrapper--isDropzone" data-dropzone="1">
{{ Block.render('', {type: 'Stripes'}) }}
</div>
<div class="BlockWrapper BlockWrapper--isDroppable" data-droppable="2">
<div class="BlockWrapper BlockWrapper--isDropzone" data-dropzone="2">
{{ Block.render('', {type: 'Stripes'}) }}
</div>
<div class="BlockWrapper">
{{ Block.render('three', {index: 3, type: 'Shell'}) }}
</div>
<div class="BlockWrapper BlockWrapper--isDroppable" data-droppable="4">
<div class="BlockWrapper BlockWrapper--isDropzone" data-dropzone="4">
{{ Block.render('', {type: 'Stripes'}) }}
</div>
<div class="BlockWrapper">
@ -43,7 +43,7 @@
<div class="BlockWrapper">
{{ Block.render('seven', {index: 7, type: 'Shell'}) }}
</div>
<div class="BlockWrapper BlockWrapper--isDroppable" data-droppable="8">
<div class="BlockWrapper BlockWrapper--isDropzone" data-dropzone="8">
{{ Block.render('', {type: 'Stripes'}) }}
</div>
</article>

4
examples/src/content/Droppable/UniqueDropzone/UniqueDropzone.scss
View File

@ -57,7 +57,7 @@ $grid-columns: 4;
border-width: get-border();
}
.BlockWrapper--isDroppable {
.BlockWrapper--isDropzone {
&::before {
content: '';
position: absolute;
@ -80,7 +80,7 @@ $grid-columns: 4;
}
// not focusable, but, whatever... this was hard to solve
&.draggable-droppable--occupied:hover {
&.draggable-dropzone--occupied:hover {
&::before {
opacity: 1;
}

8
examples/src/content/Droppable/UniqueDropzone/index.js
View File

@ -11,7 +11,7 @@ export default function UniqueDropzone() {
const droppable = new Droppable(containers, {
draggable: '.Block--isDraggable',
droppable: '.BlockWrapper--isDroppable',
dropzone: '.BlockWrapper--isDropzone',
mirror: {
constrainDimensions: true,
},
@ -21,11 +21,11 @@ export default function UniqueDropzone() {
// --- Draggable events --- //
droppable.on('drag:start', (evt) => {
droppableOrigin = evt.originalSource.parentNode.dataset.droppable;
droppableOrigin = evt.originalSource.parentNode.dataset.dropzone;
});
droppable.on('droppable:over', (evt) => {
if (droppableOrigin !== evt.droppable.dataset.droppable) {
droppable.on('droppable:dropped', (evt) => {
if (droppableOrigin !== evt.dropzone.dataset.dropzone) {
evt.cancel();
}
});

4
examples/src/content/Plugins/Collidable/Collidable.html
View File

@ -3,7 +3,7 @@
{% macro render(id) %}
<section id="{{ id }}" class="{{ id }}">
<article class="BlockLayout BlockLayout--typePositioned">
<div class="BlockWrapper BlockWrapper--isDroppable draggable-droppable--occupied">
<div class="BlockWrapper BlockWrapper--isDropzone draggable-dropzone--occupied">
{{ Block.render('drop', {type: 'Hollow'}) }}
{{ Block.render('drag', {index: 1, draggable: true}) }}
</div>
@ -11,7 +11,7 @@
{{ Block.render('', {index: 2, type: 'Stripes', classes: ['CollidableObstacle']}) }}
{{ Block.render('', {index: 3, type: 'Stripes', classes: ['CollidableObstacle']}) }}
<div class="BlockWrapper BlockWrapper--isDroppable">
<div class="BlockWrapper BlockWrapper--isDropzone">
{{ Block.render('drop', {index: 4, type: 'Hollow'}) }}
</div>

2
examples/src/content/Plugins/Collidable/index.js
View File

@ -14,7 +14,7 @@ export default function PluginsCollidable() {
const droppable = new Droppable(containers, {
draggable: '.Block--isDraggable',
droppable: '.BlockWrapper--isDroppable',
dropzone: '.BlockWrapper--isDropzone',
collidables: '.CollidableObstacle',
appendTo: containerSelector,
mirror: {