DRAGON DROP

Rank the bands

With drag handle

1. Reorder
   Frank Zappa
2. Reorder
   Ween
3. Reorder
   Leftover Salmon
4. Reorder
   Phish
5. Reorder
   Moe.

          
    import DragonDrop from 'drag-on-drop';

    const demo1 = document.getElementById('demo-1');
    const dragonDrop = new DragonDrop(demo1, {
      handle: '.handle',
      announcement: {
        grabbed: el => `${el.querySelector('span').innerText} grabbed`,
        dropped: el => `${el.querySelector('span').innerText} dropped`,
        reorder: (el, items) => {
          const pos = items.indexOf(el) + 1;
          const text = el.querySelector('span').innerText;
          return `The rankings have been updated, ${text} is now ranked #${pos} out of ${items.length}`;
        },
        cancel: 'Reranking cancelled.'
      }
    });
          
        

Today's schedule

Without drag handle (entire item is draggable - including with the keyboard!)

• Reorder
  Stand-up
• Reorder
  Sprint planning
• Reorder
  Retrospective
• Reorder
  Backlog grooming
• Reorder
  End of sprint demo

          
    import DragonDrop from 'dragon-drop';

    const demo2 = document.getElementById('demo-2');
    new DragonDrop(demo2, {
      handle: false,
      announcement: {
        grabbed: el => `${el.querySelector('div').innerText} grabbed`,
        dropped: el => `${el.querySelector('div').innerText} dropped`,
        reorder: (el, items) => {
          const pos = items.indexOf(el) + 1;
          const text = el.querySelector('div').innerText;
          return `The schedule has changed, ${text} is now item ${pos} of ${items.length}`;
        },
        cancel: 'Reschedule cancelled.'
      }
    });
          
        

Nested lists

• Home
• About Us
• Products
  • Product 1
  • Product 2
  • Product 3
• Events
  • Event 1
  • Event 2
  • Event 3
• Resources
  • Resource 1
  • Resource 2
  • Resource 3

          
    import DragonDrop from 'dragon-drop';

    var lists = Array.prototype.slice.call(document.querySelectorAll('#demo-3, .sublist'));
    var dragons = new DragonDrop(lists, {
      handle: false,
      nested: true,
      item: ':scope > li',
      announcement: {
        grabbed: function (el) { return el.querySelector('span').innerText + ' grabbed'; },
        dropped: function (el) { return el.querySelector('span').innerText + ' dropped'; },
        reorder: function (el, items) {
          var pos = items.indexOf(el) + 1;
          var text = el.querySelector('span').innerText;
          return 'The order has changed, ' + text + ' is now item ' + pos + ' of ' + items.length;
        },
        cancel: function () { return 'Reorder cancelled.'; }
      }
    });

    // when we pass DragonDrop an array, we get an array of instances back
    dragons.forEach(dragon => {
      dragon
        .on('grabbed', function (container, item) { console.log('grabbed: ', item); })
        .on('dropped', function (container, item) { console.log('dropped: ', item); })
        .on('reorder', function (container, item) { console.log('reorder: ', item); })
    });