scarlac / drag-check-js

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

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]')) });

Or CommonJS use

1. Install via NPM: npm install --save drag-check-js

2. Require the library:

var DragCheck = require('dragcheck').DragCheck;

3. Start using it as shown in vanilla js step 2 above:

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

Options:

• checkboxes (default: [], type: array, required for non-jquery): 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.
• 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.

See a demo and more complex example here - view source: https://www.seph.dk/dragcheck/examples/jquery/index.html

License

Creative Commons, CC BY 4.0 (modification + commercial use is fine) https://creativecommons.org/licenses/by/4.0/

drag-check-js's Issues

Trigger onChange on click

When using onChange like described in README.md:

onChange: function(element) {
  $(element).closest('td').css('background-color', element.checked ? '#73B355' : '#FFFACD');
}

The function is only triggered after dragging, not on click. It would be good to allow to also trigger onChange if the user only clicked one checkbox to allow a consistent callback. I tried to use clickToToggle: true for normal checkboxes but that just killed the check functionality at all on click (checkboxes are no more being checked).

I think this is expected behaviour in most cases. In the example above the table cells are only highlighted if they were dragged, but not if they were clicked, which is the same in result.

jquery document on support

Is there any way to use dragcheck with jquery on function?

http://api.jquery.com/on/

I'm using drag check on an angular app and a huge amount of my checkboxes are dynamically generated by angular.

Everytime angular changes a checkbox, my dragcheck events are lost.

How do I keep angular and dragcheck in sync is my basic question?

I'm using dragcheck inside a table which angular popultes..

example

<table>
   <tr ng-repeat="x in xs">
   <!-- this checkbox is dynamically generated by angular and can change via pagination and other events -->
   <td><input type="checkbox"/></td>
 </tr>
</table>

jQuery allow chaining by returning the set of elements

.dragCheck() doesn't return self (the jQuery object) so it's not possible to chain calls:

$(':checkboxes').dragCheck().css(...); is not possible, but should be

$(':checkboxes').css().css(...); allows chaining (good example)

Acts on disabled / readonly checkboxes

The library checks / unchecks hovered readonly / disabled checkboxes which are not changeable on click. I think this should

a) not be the case at all (exclusion by default), perhaps with a setting
or
b) described in an example in the README.md:

$('table :checkbox:not([readonly],[disabled])', context).dragCheck();

On site demo vs master vs minified

Current version is broken. Unable to check a single checkbox. (drag is being activated by click even if mouse released).
The on-site demo version differs from this and does work. Fixed it by using the version from the on-site demo http://www.seph.dk/jquery-dragcheck/demo.html

angular support

Any ideas on how to get this to work with angular?

I have

<input type="checkbox" ng-model="test" />

but when I use dragcheck to check inputs, ng-model is never updated.