npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

drag-check-js

v2.0.2

Published

Library for checking multiple checkboxes by click-and-dragging over them. Paint your selection!

Downloads

242

Readme

Drag Check JS

Lightweight Vanilla JS library & jQuery plugin (~1.9 kB without gzip) for ticking multiple checkboxes by click-dragging over them. Huge time-saver for systems where you need to work with a lot of items at once.

Takes the pain out of working with long tables. Simply click-and-drag over the checkboxes you want to check and it's done! Check out the examples for a demo. Once you've worked this way you'll never want to go back.

jQuery plugin use

1. Include jQuery and then the plugin in the dist folder like this:

<script src="dist/jquery.dragcheck.js"></script>

2. Initialize DragCheck where you need it, on the checkboxes you want to be "drag-checkable" like this:

$('.my-table :checkbox').dragCheck();

That's it.

You can customize it further by specifying options to .dragCheck(...) as an object:

$('.my-table :checkbox').dragCheck({
    onChange: function(element) {
        $(element).closest('tr').css('background-color', element.checked ? 'green' : '');
    }
});

For simple checkboxes you could also just attach directly to the change event using $(':checkbox').change(function() { ... }).dragCheck(...).

Or vanilla js library use

1. Include the library in the dist folder like this:

<script src="dist/dragcheck.js"></script>

2. Initialize DragCheck where you need it, on the checkboxes you want to be "drag-checkable" like this:

new DragCheck({ checkboxes: Array.from(document.querySelectorAll('.my-table input[type=checkbox]')) });

Options:

  • clickToToggle (default: false): When true, checked state will toggle on a simple click. Checkboxes do this by default so it's mostly useful for custom elements (ie. when used in conjunction with setChecked and getChecked).
  • deferChangeTrigger (default: false): When true, onChange events are postponed until user stops dragging. Useful if checking boxes have heavy or expensive updates attached to them and continuous onChange events could cause problems or slowdowns. See also: onDragEnd.
  • setChecked(default: undefined, type: function(element, state)): Specify a function to set the state of a checkbox or element. First argument is the element that needs its state set, second argument is the state it should be set to (true or false). Default behaviour is to set the checked property which works for checkboxes.
  • getChecked(default: undefined, type: function(element)): Specify a function that determines if an element or checkbox is checked. Default behaviour is to return element.checked which works for checkboxes.
  • onDragEnd (default: undefined, type: function(array)): Specify a function to be called once the user stops dragging. First argument is the list of changed elements.
  • onChange (default: undefined, type: function(element)): Callback for 'change' event. Default behaviour is to dispatch a 'change' event.
  • checkboxes (default: [], type: array): Specify an array of checkboxes that should get drag-check behaviour. You may also specify non-checkbox elements but you'll want to write your own setChecked and getChecked functions and probably enable clickToToggle as well.

See a demo here: https://www.seph.dk/dragcheck/examples/jquery/index.html