DRAGON DROP

Accessible drag-and-drop list reorder plugin

Activate the reorder button and use the arrow keys to reorder the list or use your mouse to drag/reorder. Press escape to cancel the reordering.

Rank the bands

With drag handle

  1. Frank Zappa
  2. Ween
  3. Leftover Salmon
  4. Phish
  5. 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!)

          
    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.'
      }
    });