<task-lists> element

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:

<scripttype="module" src="./node_modules/@github/task-lists-element/dist/task-lists-element.js">

Markup

<task-listssortable><ulclass="contains-task-list"><liclass="task-list-item"><inputtype="checkbox" class="task-list-item-checkbox">
Hubot
</li><liclass="task-list-item"><inputtype="checkbox" class="task-list-item-checkbox">
Bender
</li></ul><ulclass="contains-task-list"><liclass="task-list-item"><inputtype="checkbox" class="task-list-item-checkbox">
BB-8
</li><liclass="task-list-item"><inputtype="checkbox" class="task-list-item-checkbox">
WALL-E
</li></ul></task-lists>

Events

constlist=document.querySelector('task-lists')list.addEventListener('task-lists-check',function(event){const{position, checked}=event.detailconsole.log(position,checked)})list.addEventListener('task-lists-move',function(event){const{src, dst}=event.detailconsole.log(src,dst)})

Browser support

Browsers without native custom element support require a polyfill.

• Chrome
• Firefox
• Safari
• Microsoft Edge

Development

npm install
npm test

License

Distributed under the MIT license. See LICENSE for details.