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. Ensure screen reader is in focus mode.

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

Nested lists

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