Snapback Demo

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dragula/3.6.8/dragula.min.css" />
  <link rel="stylesheet" href="style.css" />
</head>

<body>
  <header>
    <h1>Snapback Example</h1>

    <p>After battling with goddamn drop zones myself, i decided to use the <a href="https://github.com/bevacqua/dragula">dragula</a>. While this works seemingly well, snapback is actually storing all the movements of dragula's shadow. Since DOM Mutations
      are so fast, this does not really pose a problem, and it's effects are visually degligible. However, one could easily create a mergin algorithm before storing the mutations as an undo/redo object.</p>
  </header>
  <main>
    <section class="manual">
      <h1>Manual mutation registration</h1>

      <button class="print">Print Mutations</button>
      <button class="register">Register</button>
      <button class="undo">Undo</button>
      <button class="redo">Redo</button>

      <div class="manual container">
        <div class="droppable one">
          <div class="draggable">1. schwan</div>
          <div class="draggable">2. duh</div>
          <div class="draggable">3. fwee</div>
          <div class="draggable">4. foh</div>
          <div class="draggable">5. fah</div>
          <div class="draggable">6. schwix</div>
          <div class="draggable">7. schleven</div>
          <div class="draggable">8. eight</div>
        </div>
        <div class="copy droppable two"></div>
        <div class="none droppable three"></div>
        <div class="move droppable four"></div>
      </div>
    </section>

    <section class="automatic">
      <h1>"Automatic" Mutation Registration</h1>
      <p>With automatic, I mean I automatically register the mutation in dragula's 'drop' event.</p>
      <button class="undo">Undo</button>
      <button class="redo">Redo</button>
      <div class="container">
        <div class="droppable one">
          <div class="draggable">1. schwan</div>
          <div class="draggable">2. duh</div>
          <div class="draggable">3. fwee</div>
          <div class="draggable">4. foh</div>
          <div class="draggable">5. fah</div>
          <div class="draggable">6. schwix</div>
          <div class="draggable">7. schleven</div>
          <div class="draggable">8. eight</div>
        </div>
        <div class="copy droppable two"></div>
        <div class="none droppable three"></div>
        <div class="move droppable four"></div>
      </div>
    </section>
  </main>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/dragula/3.6.2/dragula.min.js"></script>
  <script src="https://npmcdn.com/snapback@0.6.1/dist/snapback.min.js"></script>
  <script src="script.js"></script>
</body>

</html>


var $ = function (arg) {
  return document.querySelector(arg);
};

var $$ = function (arg) {
  return Array.prototype.slice.call(document.querySelectorAll(arg));
};

dragula($$('.manual .droppable'));

var manualSnapback = new Snapback($('.manual .container'));
manualSnapback.enable();

$('.manual button.register').addEventListener('click', function (e) {
  manualSnapback.register();
});

$('.manual button.undo').addEventListener('click', function (e) {
  manualSnapback.undo();
});

$('.manual button.redo').addEventListener('click', function (e) {
  manualSnapback.redo();
});

$('.manual button.print').addEventListener('click', function (e) {
  console.log(manualSnapback.mutations);
});

var automaticSnapback = new Snapback($('.automatic .container'));
automaticSnapback.enable();

$('.automatic button.undo').addEventListener('click', function (e) {
  automaticSnapback.undo();
});

$('.automatic button.redo').addEventListener('click', function (e) {
  automaticSnapback.redo();
});

dragula($$('.automatic .droppable')).on('drop', function (el) {
  // timeout is needed to allow final "drop" behaviour to be done
  // by dragula before registering.
  setTimeout(function () {
    automaticSnapback.register();
  });
});

* {
  box-sizing: border-box;
}

body {
  font-family: "Helvatica", "Arial", sans-serif;
  margin: 15px;
  
}
body > header > h1 {
  font-size: 48px;
}

p {
  line-height: 1.6;
}

h1, h2, h3, h4, h5, h5, h6 {
  margin-bottom: 0.2em;
}

main {
  display: flex;
}

main > section {
  flex: 1 1 0px;
}

main > section > h1 {
  font-size: 32px;
}


/* DEMO CSS */

.container {
  height: 600px;
  width: 100%;
  background: tomato;
  display: flex;
}

.container > .droppable {
  flex: 1 0 0px;
  border: 1px dashed darksalmon;
}

.draggable {
  width: 100%;
  background: rgba(0, 0, 0, 0.6);
  background: blue;
  color: white;
  font-size: 24px;
  padding: 10px 15px;
  border: 10px solid rgba(255, 255, 255, 0.2);
}