Drag and Drop table content with JavaScript

Content of HTML table cells can be dragged to another cell or another table. It isn't difficult to define onMouseMove handler and change top / left element styles to move the object. In case with tables, you will have to determine somehow destination cell. Attaching onMouseOver handler on TD elements will not work, because browser doesn't fire events to the elements beneath the dragged object.

Drag and Drop, JavaScript Video Download / Preview GitHub 1,016 Comments

Drag and drop table rows with JavaScript

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.

Drag and Drop, JavaScript Video Download / Preview GitHub 164 Comments

JavaScript Drag and Drop example 3

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 the timetable, button in the same color will be displayed next to the subject (clone object).

Drag and Drop, JavaScript Video Download / Preview GitHub 153 Comments

REDIPS.drag documentation

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.

Drag and Drop, JavaScript Video Download / Preview GitHub 137 Comments

JavaScript date validation

JavaScript date validation can be done in many ways like month range testing, day range testing (depending on number of days in the month) and so on. Here is shown much simpler solution. Take day, month and year from input string to create JavaScript Date object. Compare input day, month and year with day, month and year extracted from the Date() object. If they aren't the same then the input date is not valid.

JavaScript 78 Comments

JavaScript dialog box

If you aren't satisfied with prompt, confirm, alert or, then this JavaScript dialog box can be your choice. Dialog box is emulated with two DIVs. First DIV overlays whole page (transparency is styled to 60%) while second DIV is positioned at the page center. That's nothing new but JavaScript code is short, well commented and closed in own namespace (for easier integration with other frameworks).

JavaScript Download GitHub 65 Comments

Adding table rows and columns in JavaScript

With insertRow() method you can insert a new row at the specified position in HTML table. After row is created, use insertCell() method to insert a table cell. Wrap this methods in JavaScript functions and you have code to dynamically add new rows and columns in the HTML table.

JavaScript 64 Comments

AJAX progress bar

With few lines of JavaScript and CSS you can make a simple AJAX progress bar. JavaScript will periodically ask for progress value and server will respond with XML. Progress value should be extracted from the XML and displayed as width of the DIV element.

JavaScript Download 60 Comments

REDIPS.drag documentation - Appendix A

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.

Drag and Drop, JavaScript Video Download / Preview GitHub 51 Comments

Write to a log file with PHP

As I caught myself in process of writing PHP "log" function several times I have finally decided to create a simple Logging PHP class. After Logging class initialization, first call of lwrite method will open log file implicitly and write line to the file. Every other lwrite will use already opened file pointer until closing file with lclose.

PHP Download 39 Comments

JavaScript drag and drop plus content shift

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.

Drag and Drop, JavaScript Video Download / Preview GitHub 35 Comments

Maintain vertical scroll position

This post describes how to maintain vertical scroll position after form submission or clicking on the link. Script will read vertical scroll position and append scroll value to the URL. After page is loaded, JavaScript function will search for the scroll parameter in the URL and set the scroll position.

JavaScript Download 33 Comments