Skip to content
Drag and drop task list items.
JavaScript
Branch: master
Clone or download

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github/workflows use GitHub CI Sep 12, 2019
examples Update event name, documents, and remove bubbles Mar 14, 2019
src fix shadowed variable Jun 26, 2019
test Update event name, documents, and remove bubbles Mar 14, 2019
.eslintrc.json Initial <task-lists> element Apr 25, 2018
.flowconfig Initial <task-lists> element Apr 25, 2018
.gitignore Initial <task-lists> element Apr 25, 2018
.travis.yml Add Travis build configuration Jun 28, 2018
CODEOWNERS Create CODEOWNERS May 21, 2020
LICENSE Initial <task-lists> element Apr 25, 2018
README.md Update event name, documents, and remove bubbles Mar 14, 2019
index.d.ts 'add type to HTMLElementTagNameMap' Jan 16, 2020
package-lock.json 1.0.7 Jan 20, 2020
package.json 1.0.7 Jan 20, 2020
prettier.config.js Initial <task-lists> element Apr 25, 2018
rollup.config.js Update for modern browsers Feb 20, 2019

README.md

<task-lists> element

Drag and drop task list items.

Installation

$ npm install --save @github/task-lists-element

Usage

import '@github/task-lists-element'
<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

npm install
npm test

License

Distributed under the MIT license. See LICENSE for details.

You can’t perform that action at this time.