draggable icon indicating copy to clipboard operation
draggable copied to clipboard

Published 20 hours ago • verified publisher icon Shopify

SwapAnimation: add checks before applying any styling

Open hamedbaatour opened this issue 4 years ago • 1 comments

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:

  • [x] Chrome version
  • [x] Firefox version
  • [ ] Safari version
  • [x] IE / Edge version
  • [ ] iOS Browser version
  • [ ] Android Browser version

hamedbaatour avatar Apr 30 '20 19:04 hamedbaatour

Thanks for your contribution.

I find we can check source and over element once in onSortableSorted. How about fixing this bug like https://github.com/zjffun/draggable/commit/313339e618c0cea8e0b234716b41efe8457625be . 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>

zjffun avatar Jul 19 '20 15:07 zjffun