SwapAnimation: add checks before applying any styling #389

hamedbaatour · 2020-04-30T19:06:07Z

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:

Fixes #261

zjffun · 2020-07-19T15:24:02Z

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>

add checks before applying any styling

3f5ef5c

Fixes #261

hamedbaatour changed the title ~~add checks before applying any styling~~ SwapAnimation: add checks before applying any styling Apr 30, 2020

fix styling - prettier

c1caff7

zjffun self-requested a review July 12, 2020 10:50

spy-v2 bot deleted the branch Shopify:master September 18, 2023 21:48

jacksleight mentioned this pull request Jul 4, 2024

[5.x] Ability to drag/drop sets between replicators statamic/cms#10361

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

SwapAnimation: add checks before applying any styling #389

SwapAnimation: add checks before applying any styling #389

hamedbaatour commented Apr 30, 2020

zjffun commented Jul 19, 2020

SwapAnimation: add checks before applying any styling #389

Are you sure you want to change the base?

SwapAnimation: add checks before applying any styling #389

Conversation

hamedbaatour commented Apr 30, 2020

This PR implements or fixes... (explain your changes)

This PR closes the following issues... (if applicable)

Does this PR require the Docs to be updated?

Does this PR require new tests?

This branch been tested on... (click all that apply / add new items)

zjffun commented Jul 19, 2020