HotText.js can be dropped into a page (along with its requirements), and be immediately called to create draggable HotText inputs.
The MooTools framework 1.2+, both Core and More, with the following packages:
Core: Core Package, Native Package, Class Package, Element Package
More: Drag Package (does not require Drag.Move)
HotText is designed to be a "drop-in" solution, so working with it is extremely easy. Just link to the MooTools Core & More packages, and the HotText source file. Then, pass a CSS selector for the elements you want to make HotText:
That's it! Your HotText elements are now initialized and ready to use. Try dragging them around and watch the values change. You can also click on the elements and edit the input directly.
The elements to be turned into HotText may be of any type, either block-level or inline. However, there are two required elements that must be inside: a span element (to display the value), and either a select or input element.
If you use an input element, it must be of the type text, and the value must be numeric. Numeric data may be formatted – for example a dollar sign in front or unit on the end, but there must be a numeral somewhere inside the data to let HotText know that it can be incremented.
Options are passed in the HotText constructor as the second argument.
||75||The number of pixels for each "step". Increase this number if the dragging feels to "sensitive".|
||false||This option will submit the form automatically when the value is changed.|
||false||Checks linked checkbox elements when the value is changed. See below for more details.|
||[-Infinity, Infinity]||An array with the min and max values to limit input to. If you set this option to [1,3], you will only be able to drag to numbers between 1 and 3. Not applicable to select elements.|
||true||Numeric inputs will have grouped thousands separated by commas. Not applicable to select elements.|
The autoCheckbox option is one way that HotText helps to facilitate this. This option is easier to show than it is to explain:
<tr> <td> <input type="checkbox" name="edit" value="22" /> </td> <td class="hotText"> <span>445</span> <input type="text" name="quantity22" value="445" /> </td> </tr>
However, if we were to add a checkbox to each row, the user could check off which rows they were editing, and we could streamline things a bit.
If we create a form of this type and follow its conventions, we can then turn on the autoCheckbox option, and HotText will automatically turn on these checkboxes when a row has been changed. Essentially, it is looking for a digit in the name attribute of the changed input. This digit is intended to be the primary key of the database. Then, it will search for a checkbox with the name edit and this digit as its value. If it finds one, it will know that this checkbox was intended as the "edit" checkbox for that row, and will turn it on.