Directory

← Back

task-lists-element

Drag and drop task list items.

Author

Rating

Popularity

<100

<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.

Compatibility

(Loading compatibility data...)

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

Dependencies

Released
2019-04-16
Maturity
IMPORTED
License
MIT License

Compatibility

Framework
Browser
Browser Independent

task-lists-element - Vaadin Add-on Directory

Drag and drop task list items. task-lists-element - Vaadin Add-on Directory
# <task-lists> element Drag and drop task list items. ## Installation ``` $ npm install --save @github/task-lists-element ``` ## Usage ```js import '@github/task-lists-element' ``` ```html
  • Hubot
  • Bender
  • BB-8
  • WALL-E
``` ## Events ```js 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][support] require a [polyfill][]. - Chrome - Firefox - Safari - Microsoft Edge [support]: https://caniuse.com/#feat=custom-elementsv1 [polyfill]: https://github.com/webcomponents/custom-elements ## Development ``` npm install npm test ``` ## License Distributed under the MIT license. See LICENSE for details.
Online