SwapAnimation: add checks before applying any styling #389
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
hamedbaatour
changed the title
|
Thanks for your contribution. I find we can check source and over element once in Demo for testing : <html lang="en" class="">
<head>
<meta charset="UTF-8">
<title>CodePen Demo</title>
<style>
*,
*:before,
*:after {
box-sizing: border-box;
}
body {
overflow-x: hidden;
}
body.lock {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.container {
display: -webkit-box;
display: flex;
flex-wrap: wrap;
-webkit-box-pack: center;
justify-content: center;
width: 100%;
padding: 5vw;
font-size: calc(7px + (20 - 7) * ((100vw - 320px) / (1600 - 320)));
}
.title {
-webkit-box-flex: 1;
flex: 1 0 100%;
text-align: center;
}
.grid {
display: grid;
grid-template: 15em / 15em 15em 15em;
grid-gap: 1em;
background-color: #ffffff;
outline: 0;
padding: 1em;
border-width: 1px;
border-style: dashed;
border-color: transparent;
border-radius: 1em;
}
.item {
outline: 0;
border-radius: 1em;
width: 15em;
height: 15em;
cursor: -webkit-grab;
cursor: grab;
}
.item.yellow {
background-color: #F2C85B;
box-shadow: 1px 1px 1em #F2C85B;
}
.item.red {
background-color: #F86E51;
box-shadow: 1px 1px 1em #F86E51;
}
.item.blue {
background-color: #3A0751;
box-shadow: 1px 1px 1em #3A0751;
}
.sortable-animation>* {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.sortableCards-move {
background-color: #f00;
}
.sortableCards-enter,
.sortableCards-leave-to {
-webkit-transition: 5s;
transition: 5s;
opacity: 0;
}
.draggable--is-dragging {
cursor: -webkit-grabbing;
cursor: grabbing;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.draggable--is-dragging .grid:not(.draggable-container--over) {
-webkit-animation: draggablePulseBorder ease-in-out 1500ms infinite;
animation: draggablePulseBorder ease-in-out 1500ms infinite;
}
.draggable-source--is-dragging {
opacity: 0.3;
cursor: -webkit-grabbing;
cursor: grabbing;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.draggable-mirror {
overflow: auto;
z-index: 10;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.draggable-source--placed {
-webkit-animation: placedItem ease-in-out 0.5s;
animation: placedItem ease-in-out 0.5s;
}
.sortableCards-enter-active,
.sortableCards-leave-to {
opacity: 0;
}
.sortableCards-leave-active {
position: absolute;
}
@-webkit-keyframes draggablePulseBorder {
0% {
border-color: transparent;
}
35% {
border-color: black;
}
100% {
border-color: transparent;
}
}
@keyframes draggablePulseBorder {
0% {
border-color: transparent;
}
35% {
border-color: black;
}
100% {
border-color: transparent;
}
}
@-webkit-keyframes placedItem {
from {
-webkit-transform: scale(1.065);
transform: scale(1.065);
}
to {
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes placedItem {
from {
-webkit-transform: scale(1.065);
transform: scale(1.065);
}
to {
-webkit-transform: scale(1);
transform: scale(1);
}
}
</style>
</head>
<body class="lock">
<div class="container">
<h1 class="title">Drag things around</h1>
<div class="grid" tabindex="0">
<div class="item yellow" tabindex="0"></div>
<div class="item yellow" tabindex="0"></div>
<div class="item yellow" tabindex="0"></div>
</div>
<div class="grid" tabindex="0">
</div>
<div class="grid" tabindex="0">
<div class="item red" tabindex="0"></div>
<div class="item red" tabindex="0"></div>
<div class="item red" tabindex="0"></div>
<div class="item blue" tabindex="0"></div>
<div class="item blue" tabindex="0"></div>
<div class="item blue" tabindex="0"></div>
</div>
</div>
<script src="./lib/draggable.bundle.js"></script>
<script>
const body = document.body,
containers = document.querySelectorAll('.grid');
const sortable = new Draggable.Sortable(containers, {
draggable: '.item',
delay: 0,
swapAnimation: {
duration: 200,
easingFunction: 'ease-in-out',
horizontal: true
},
plugins: [Draggable.Plugins.SwapAnimation]
});
// safari needs user-select: none BEFORE start dragging. Otherwise it's showing the wrong cursor during drag.
document.addEventListener('mousedown', e => {
body.classList.add('lock');
});
document.addEventListener('mouseup', e => {
body.classList.add('lock');
});
sortable.on('sortable:sorted', function ({ oldIndex, newIndex, dragEvent }) {
const { source, over } = dragEvent;
// over is undefined when drag into another container
console.log(source, over, oldIndex, newIndex);
});
sortable.on('drag:start', () => console.log('drag:start'));
sortable.on('drag:over', () => console.log('drag:over'));
</script>
</body>
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This PR implements or fixes... (explain your changes)
adds checks before applying any transition styles to element this fixes the issue when an element is dragged to another drop zone SwapAnimation Plugin throws
Cannot read property 'style' of undefined…
This PR closes the following issues... (if applicable)
Fixes #261
…
Does this PR require the Docs to be updated?
no
…
Does this PR require new tests?
no
…
This branch been tested on... (click all that apply / add new items)
Browsers: