Drag and drop task list items.
Installation
$ npm install --save @github/task-lists-element
Usage
Script
Import as a module:
import '@github/task-lists-element'
With a script tag:
<script type="module" src="./node_modules/@github/task-lists-element/dist/task-lists-element.js">
Markup
<task-lists sortable> <ul class="contains-task-list"> <li class="task-list-item"> <input type="checkbox" class="task-list-item-checkbox"> Hubot </li> <li class="task-list-item"> <input type="checkbox" class="task-list-item-checkbox"> Bender </li> </ul> <ul class="contains-task-list"> <li class="task-list-item"> <input type="checkbox" class="task-list-item-checkbox"> BB-8 </li> <li class="task-list-item"> <input type="checkbox" class="task-list-item-checkbox"> WALL-E </li> </ul> </task-lists>
Events
const list = document.querySelector('task-lists') list.addEventListener('task-lists-check', function(event) { const {position, checked} = event.detail console.log(position, checked) }) list.addEventListener('task-lists-move', function(event) { const {src, dst} = event.detail console.log(src, dst) })
Browser support
Browsers without native custom element support require a polyfill.
- Chrome
- Firefox
- Safari
- Microsoft Edge
Development
License
Distributed under the MIT license. See LICENSE for details.