Draggable: Publish source code for project homepage?

[ddemaree]

It looks like the index.html and other assets in the gh-pages branch are minified/built files, generated from some other source. In the absence of an official set of examples, it'd be great to be able to view source for the home page as a live example of how Draggable works.

[beefchimi]

I am hoping to get some examples in by the time we do our first stable release. Apologies for the delay! Code is pretty straight forward - here is an example of the Collidable section:

import {Droppable, Collidable} from 'draggable';
import SoundFx from '../../SoundFx';

export default function CollidableSection() {
  const containers = document.querySelectorAll('.CubesFrame--idCollidable');

  const droppable = new Droppable(containers, {
    draggable: '.draggable-source',
    droppable: '.Cube--typeDroppable',
    appendTo: '.CubesFrame--idCollidable',
    collidables: '.CubesFrame--idCollidable .CollisionWall',
    classes: {
      body: 'draggable-container--is-dragging',
    },
    plugins: [Collidable],
  });

  // --- Drag states --- //
  let canPlayOverSound = false;

  droppable.on('drag:start', () => {
    SoundFx.Single.play('cubeUp');
  });

  droppable.on('drag:over', () => {
    if (!canPlayOverSound) {
      return;
    }

    SoundFx.Single.play('cubeOver');
  });

  droppable.on('drag:out', () => {
    canPlayOverSound = true;
  });

  droppable.on('drag:stop', () => {
    SoundFx.Single.play('cubeDown');
    canPlayOverSound = false;
  });

  droppable.on('collidable:in', ({collidingElement}) => {
    SoundFx.Single.play('cubeCollide');
    collidingElement.classList.add('isColliding');
  });

  droppable.on('collidable:out', ({collidingElement}) => {
    collidingElement.classList.remove('isColliding');
  });

  return droppable;
}

[fredbenenson]

Just seconding this – would love an un-minified version of the gh-pages javascript! Thanks for a great library.

[beefchimi]

Getting very close to finishing our Examples site - which will be open sourced in this repo. Just need @tsov to finish up some things on Draggable so we can do a full release.

Apologies for the delay everyone!

[fredbenenson]

Sweet! Go @tsov :) I decided to switch to jQuery.draggable() for the time being since it just worked out of the box – but I'd much prefer to use Draggable since it's clear you guys put some great thought and work into it – particularly the touch support. Regardless thanks for your hard work!

[beefchimi]

Closed by https://github.com/Shopify/draggable/pull/118