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
- Frank Zappa
- Ween
- Leftover Salmon
- Phish
- 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!)
- ReorderStand-up
- ReorderSprint planning
- ReorderRetrospective
- ReorderBacklog grooming
- ReorderEnd 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); }) });