Techniques and Web Technologies
Here is list of keywords (mostly class names) used in REDIPS.drag library. Id of drag container(s) or table cell class names should be named properly to achieve needed functionality like cloning DIV elements, adding trash cell, mark cells, adding row handler or mark table as “nolayout”. This post is appendix to the REDIPS.drag documentation post.
Demo is based on REDIPS.drag JavaScript library with enabled shift drop option. After element is dropped to the cell, other elements will be shifted to make room. Animation is optional and can be turned off. The presented demo can be a good start point for various sorting Web applications.
Example shows drag-n-drop functionality in combination with animation. Tables are closed within separated drag containers and actions from any table are mirrored to the other table. Elements can be shuffled or reset to the initial position.
REDIPS.drag is a JavaScript drag and drop library focused on dragging table content and table rows. Here you will see a list of public properties and methods contained in REDIPS.drag library. Documentation is generated with JsDoc Toolkit.
REDIPS.drag was initially built to drag and drop table content. After publishing first version of REDIPS.drag, I received a lot of questions about dragging table rows also. Now is possible to drag and drop table rows as well as table content.
Example shows dragging functionality across scrollable DIV containers. If DIV container is bigger than displayed size, moving element near edge will start to auto-scroll.
Tic-tac-toe is built with Drag and Drop library explained in previous post “Drag and drop table content with JavaScript”. Example shows how to move and dynamically enable / disable DIV objects.
School timetable is example of how to use REDIPS.drag library. Page layout contains two tables – left table with school subjects and timetable on the right. After subject is placed to timetable, button in the same color will be displayed next to the subject (clone object).
This post shows how to use REDIPS.drag library described in post “Drag and drop table content with JavaScript”. HTML table is stylized to have left column with content, main table and message line. Elements on the left side (green and orange) should be placed to the colored table cells. After element is correctly sited, appropriate message will be displayed.
This post shows simple autocomplete JavaScript library. For every text input, method prepares URL and displays box with answers returned from server. DIV box is shown below input field with exact width as input field.
This post shows how to implement simple image hover with IFRAME and DIV. In both cases JavaScript code will set innerHTML to DIV element and make it visible. IFRAME version will force browser to make connection each time while DIV version may have some problems with older browsers (dropdown menu stays in front of displayed image).
With few lines of JavaScript and CSS it’s possible to make simple AJAX progress bar. JavaScript will periodically ask for progress value and server will respond with JSON data. Progress value is being read and displayed as DIV element width. To start progress bar demo, click on Start button and wait few seconds to begin. To watch how this page sends requests to Web server just open DOM inspector “Network” card.