Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

SwapAnimation: add checks before applying any styling #389

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

SwapAnimation: add checks before applying any styling #389

wants to merge 2 commits into from

Conversation

hamedbaatour
Copy link

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:

  • Chrome version
  • Firefox version
  • Safari version
  • IE / Edge version
  • iOS Browser version
  • Android Browser version

@hamedbaatour hamedbaatour changed the title add checks before applying any styling SwapAnimation: add checks before applying any styling Apr 30, 2020
@zjffun zjffun self-requested a review July 12, 2020 10:50
@zjffun
Copy link
Contributor

zjffun commented Jul 19, 2020

Thanks for your contribution.

I find we can check source and over element once in onSortableSorted. How about fixing this bug like zjffun@313339e . If you agree I can push this commit to this PR.

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
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

SwapAnimation Plugin
2 participants