jQuery Table Drag’n Drop Plugin

jQuery Table Drag and Drop plugin simply adds drag’n drop functionality to tables.

Table drag’n dropping can’t be handled by standard drag’n dropping utilities as you need to move the whole row, not just the cell that receives the mouse events and re-parenting the row also requires specific code.

jQuery Table Drap Drop

This drag and drop plugin:

  • Allows the user to reorder rows within a table.
  • Individual rows can be marked as non-draggable and/or non-droppable.
  • Rows can have as many cells as necessary and the cells can contain form elements.

Standard usage is very simple:

$("#table-1").tableDnD();

After every drag’n drop event the new ordering values of the columns are returned as an array which you can send it as an Ajax query for updating the database.

  • Thanks for telling us about the plugiin… It’s going to be very useful for me.

  • ~Cool plug-in. Nice one!

  • Right now, I am using this plugin to make a bus ticket system, so passengers can choose seats and drag them to an text input. Quite cool.

    Thanks

  • Using this for the reordering of images on a CMS.

    Thanks!

  • Good stuff. For now on, I will use this plugin for my dinamyc database table.

  • Seppo Hovi

    The (X)HTML-standard indicates that the ID-attribute cannot start with a number which seems to be the key requirement for this plugin to work. Please tell me I’m wrong?

  • @Seppo,

    You’re right. But a simple modification in id names & how they are handled can fix it.

  • If you start the plugin through a function (there’s a reason for not wanting drag n drop on all the time), is there a ay to turn it off once it is called?

  • bird

    so cool

Search