Drag and Drop

Help please....
How can we drag and drop a colum in a table using java script..Also if we place a column over another one in the same table then it has to get exchanged each other.
Thanks in advance.

Comments

  • : Help please....
    : How can we drag and drop a colum in a table using java script..Also if we place a column over another one in the same table then it has to get exchanged each other.
    : Thanks in advance.
    :

    Hi there,

    This functionality is not going to be easily ported cross-browser so you first have to decide what browsers you need to develop this for.

    Assuming you're aiming for IE5+ then it's simple.

    I'm assuming that your table is either dynamically generated from a script and database or hard-coded, either way, you are in control of the HTML.

    Secondly I'm assuming that you have some "layers" experience so you'll understand the terms I'm using.

    Ok...I've created a basic DHTML page for you. I ONLY produce content that works with IE5+ (and nowadays, it's leaning towards IE5.5+).

    Here it is...

    [code]



    Drag and Drop



    var selectedCol = 0;
    var targetCol = 0;

    var colNames = ["Col1", "Col2", "Col3", "Col4", "Col5"];

    var rows = [
    [1,2,3,4,5],
    [0,9,8,7,6],
    [1,2,3,4,5],
    [0,9,8,7,6],
    [1,2,3,4,5],
    [1,2,3,4,5],
    [0,9,8,7,6],
    [1,2,3,4,5],
    [0,9,8,7,6],
    [1,2,3,4,5]
    ];

    function generateTable() {
    var obj = document.getElementById("tableLayer");
    obj.innerHTML = "";

    var innerHTML = "";

    innerHTML = "
    ";

    for (var i = 0; i != colNames.length; i++) {
    innerHTML += "" + colNames[i] + "
    ";
    }

    for (var i = 0; i != rows.length; i++) {
    innerHTML += "
    ";
    for (var l = 0; l != colNames.length; l++) {
    innerHTML += " ";
    }
    innerHTML += " ";
    }

    innerHTML += "
    " + rows[i][l] + "
    ";

    obj.innerHTML = innerHTML;
    }

    function startDrag(obj) {
    selectedCol = obj.id.substring(3);
    }

    function stopDrag(obj) {
    targetCol = obj.id.substring(3);

    var temp = [];
    var srcColName = "";
    var dstColName = "";

    for (var i = 0; i != colNames.length; i++) {
    if (i == selectedCol) {
    srcColName = colNames[i];
    } else if (i == targetCol) {
    dstColName = colNames[i];
    }
    }

    colNames[selectedCol] = dstColName;
    colNames[targetCol] = srcColName;

    for (var i = 0; i != rows.length; i++) {
    temp[i] = rows[i][targetCol];
    }

    for (var i = 0; i != rows.length; i++) {
    rows[i][targetCol] = rows[i][selectedCol];
    }

    for (var i = 0; i != temp.length; i++) {
    rows[i][selectedCol] = temp[i];
    }

    generateTable();
    }








    generateTable();






    [/code]

    Don't worry about the way it highlights the text when you drag, you're just going to have to create Images or put up with it (or find a better way and let me know *grin*).

    Here's the break-down.

    [code]

    var selectedCol = 0;
    var targetCol = 0;

    [/code]

    These variables hold the Selected Column and the Destination (Target) Column. When you MouseDown on a Column, it becomes the selectedCol and when you MouseUp on a Column, it becomes the targetCol.

    [code]

    var colNames = ["Col1", "Col2", "Col3", "Col4", "Col5"];

    var rows = [
    [1,2,3,4,5],
    [0,9,8,7,6],
    [1,2,3,4,5],
    [0,9,8,7,6],
    [1,2,3,4,5],
    [1,2,3,4,5],
    [0,9,8,7,6],
    [1,2,3,4,5],
    [0,9,8,7,6],
    [1,2,3,4,5]
    ];

    [/code]

    This is the only part of the entire script you're going to need to worry about. This is your dataset. You define the amount of Columns by specifing their Column Names (which are displayed at the top of each column), and their cooresponding Column data.

    Rows is a two-dimensional array, each row in Rows is a Row in your dataset, so make sure you understand that for each Column, the data goes DOWN, for each Row, it goes ACROSS to the RIGHT.

    However you populate or generate these dataset's is up to you, either hard-code them or use Perl to generate it for you. It's your call.

    [code]

    function generateTable() {
    var obj = document.getElementById("tableLayer");
    obj.innerHTML = "";

    var innerHTML = "";

    innerHTML = "
    ";

    for (var i = 0; i != colNames.length; i++) {
    innerHTML += "" + colNames[i] + "
    ";
    }

    for (var i = 0; i != rows.length; i++) {
    innerHTML += "
    ";
    for (var l = 0; l != colNames.length; l++) {
    innerHTML += " ";
    }
    innerHTML += " ";
    }

    innerHTML += "
    " + rows[i][l] + "
    ";

    obj.innerHTML = innerHTML;
    }

    [/code]

    This function simply takes a name of a Layer (in this case, tableLayer, which of course can be whatever you want, AND, with some slight modifications, can allow more than ONE table to have this feature! If you need it, let me know and I'll modify it (preferably, have a go yourself and see how you go!)

    It does the following:

    1. Creates an Object Variable by seeking the DOM for an element called tableLayer.
    2. Clears the HTML code within the layer (there is NO error checking involved since I can guarantee that the layer tableLayer WILL be there, otherwise, you need to incorporate some level of Error Checking).
    3. Initialises a temp variable to hold the new HTML code.
    4. Starts the table.
    5. Adds the Column Headers.
    6. Adds each Row.
    7. Closes the table.
    8. Sets the HTML for tableLayer to the newly generated HTML for the table.

    [code]

    function startDrag(obj) {
    selectedCol = obj.id.substring(3);
    }

    [/code]

    This merely says that whenever a column header is clicked (ie. MouseDown), store the ID of the column for later use.

    [code]

    function stopDrag(obj) {
    targetCol = obj.id.substring(3);

    var temp = [];
    var srcColName = "";
    var dstColName = "";

    for (var i = 0; i != colNames.length; i++) {
    if (i == selectedCol) {
    srcColName = colNames[i];
    } else if (i == targetCol) {
    dstColName = colNames[i];
    }
    }

    colNames[selectedCol] = dstColName;
    colNames[targetCol] = srcColName;

    for (var i = 0; i != rows.length; i++) {
    temp[i] = rows[i][targetCol];
    }

    for (var i = 0; i != rows.length; i++) {
    rows[i][targetCol] = rows[i][selectedCol];
    }

    for (var i = 0; i != temp.length; i++) {
    rows[i][selectedCol] = temp[i];
    }

    generateTable();
    }

    [/code]

    Yep, this function CAN and probably should be optimised but I wanted to show what actually get's done otherwise I would have optimised it.

    This function is the guts of the column transfers.

    It does the following:

    1. Receives the Column ID that you dropped to.
    2. Initalises a temp Array to store the Target Column Data.
    3. Swaps the Column Names.
    4. Now, Moves all the data from the Target Column to the Temp Array.
    5. Replaces the Target Column with the Selected Column data.
    6. Takes the Temp Array data and dumps it to the Selected Column.
    7. Calls generateTable(); to redisplay the new Column orders and data.

    It's not the "prettiest" way, or possibly the best way, but it is a way. I also admit it's not true drag and drop, but it's what happens behind the scenes to make the drag and drop work on the data, so if you want to add "true" drag and drop features, go for it, and please, I'd love to have a look at the result!

    HTH
    Bradley q:)
Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Categories

In this Discussion