With few lines of JavaScript, you can drag and drop table content. Content of the HTML table cells can be dragged to the another table cell or another table. It isn’t so difficult to define onMouseMove event and change top / left element styles to move the object. In case with table, you will have...

I’ve been using JQuery for a while now and really agree with its tag line that it’s the “The Write Less, Do More, JavaScript Library”. We’ve also got this code for dragging and dropping table rows that has proved very popular, so it seemed natural to combine the two and wrap up the table drag...

This script shows basic drag and drop node moving in a tree. In this implementation there are no restrictions and anything can be dropped anywhere except appending to nodes marked “leaf” (the files). Drag along the edge of the tree to trigger auto scrolling while performing a drag and drop. In...

A couple of people have asked about the CSS magnifier that I wrote for the National Maritime Museum web site, so this is a test to see if I can easily embed a magnified image in a blog post. To add the magnifier to an existing image, you’ll need a copy of the CSS file, youngpup’s DOM-Drag...

KFM is an online file manager which can be used on its own, or as a plugin for a rich-text editor such as FCKeditor or TinyMCE. KFM is Open Source, and you are free to use it in any project, whether free or commercial. drag-and-drop everything, icon-view, list-view, plugins, image manipulations, slideshows,...

In the previous article of YUI based lightbox, I’ve shown you how easily one can create a lightbox using YUI’s Dialog class. Although the lightbox we created in the previous article has the basic skeleton of a lightbox, it still lacks some crucial features and it looks quite ugly. Luckily...

Handler feature added! Finally I decided to add a little piece of extra functionality to the EasyDrag plugin. It has been constantly requested, so now you can download and test it. I will be releasing it as a final version after some feedback, so please let me know if it works for you. How does it work? It’s...

Yahoo! User Interface Library (YUI) provides a very handy class for creating modal dialog box with background masking, which can be used to create lightbox. If you have no idea what a lightbox is, you can run this online demo to get a taste of what it looks like. There are several advantages to use YUI...

Script.aculo.us is a set of JavaScript libraries to enhance the user interface of web sites. It provides an visual effects engine, a drag and drop library (including sortable lists), a couple of controls (Ajax-based autocompletion, in-place editing, sliders) and more. 1. Download & install Using...

When the ‘#’ link in the example boxes is activated (either by tabbing to it and hitting Enter or by clicking on it) the element can be dragged by the arrow keys. Pressing Enter or Escape releases it. (Feel free to change these keys, by the way. I’m not sure what the release keys ought...