JQuery Drag and Drop Demo. Using jQuery or MooTools For Drag, Drop, Sort, Save. One of my most popular posts has been Using MooTools 1.2 for Drag, Drop, Sort, Save. My post detailed how you can create a drag'n'drop, AJAX-ified system to allow the user to drag and drop elements and quickly save them with PHP and MySQL on the server side. I've chosen to update the post with a faster, more efficient set of MooTools and PHP code. I've also provided a jQuery equivalent. Enjoy! The MySQL Table This table shows only the important fields per this functionality: ID, Title, and Sort Order. The PHP / HTML List Build <? We'll start out by querying the database to retrieve all records from the table. Create a message box DIV that will notify users of the status of AJAX request actions.create a form element.create an "auto-save" option checkbox that directs whether or not the sort order should be saved on every drag/drop.create a UL element that outputs the list of records in their current sort order.
The CSS The MooTools JavaScript The jQuery JavaScript The "Header" PHP/MySQL. Demo Jquery Animated Grid Plugin 0.6. Drag And Drop Everything With These 30 Handy jQuery Plugins. Highlight Demo. An introduction to Highlight Overview Highlight increases usability by highlighting elements as you interact with the page. Its primary use is for forms, but it can also be used for tables, lists, or any element you specify.
Examples uses: Form-filling can be made clearer by highlighting the element around a control as you tab into it Table rows can be made more visible as you pass the mouse over them, or click them Elements can be toggled as you click them Basic Usage The basic form for using Highlight is: $(selector).highlight(parentSelector, highlightClass, startEvent, endEvent) Highlight works by adding a class to a parent element to the one that was targeted. For example, a text field might be contained by a li element, and this li element would have the default "highlight" class added to it as the text field was focused, and removed when it was blurred.
By default, Highlight chooses defaults for common usage, so it's easy to target elements with just the basic command, for example... Dave. jQuery Dynamic Drag'n Drop. jQuery Link Nudge Plugin Example.