JavaScript Drag and Drop example 4

Tic-tac-toe is built with Drag and Drop library. Example shows how to move and dynamically enable / disable DIV objects. Detail description of library can be read on Drag and drop table content with JavaScript. Please try to move X and O objects.


REDIPS.drag example04

Drag and drop library handles dragging DIV elements and calculates dropping areas on HTML table. Additional work is to place logic inside event.dropped event handler. Here is complete JavaScript code used in this example.

var board = [[0, 0, 0], [0, 0, 0], [0, 0, 0]], // board array
    xo = {x: 1, o: -1},// define values for X and O elements
    redipsInit,        // define redipsInit variable
    rd,                // reference to the REDIPS.drag library
    divO,              // reference to the O DIV element
    // methods
    toggleXO,          // toggle X and O clone elements on the left
    checkBoard,        // method checks board
    checkLine;         // method checks line (row, column or diagonal) for value 3 or -3

// redips initialization
redipsInit = function () {
    // set reference to the REDIPS.drag library
    rd = REDIPS.drag;
    // initialization
    rd.init();
    // define border for disabled element (default is dotted)
    rd.style.borderDisabled = 'none';
    // dragged elements can be placed to the empty cells only
    rd.dropMode = 'single';
    // set reference to the O div element (needed in toggleXO() method)
    divO = document.getElementById('o');
    // toggle X and O elements on the left side
    toggleXO();
    // declare tasks after element is dropped
    rd.event.dropped = function () {
        var obj = rd.obj,        // current element (cloned element)
            objOld = rd.objOld,    // previous element (this is clone element)
            tac = rd.td.target;    // target cell
        // disable dropped DIV element
        rd.enableDrag(false, obj);
        // toggle X and O elements on the left
        toggleXO();
        // check board (objOld.id can be 'x' or 'o')
        checkBoard(objOld.id, tac.parentNode.rowIndex, tac.cellIndex);
    };
};

// toggle X and O clone elements on the left
toggleXO = function () {
    // references to the X and O elements
    if (divO.redips.enabled) {
        rd.enableDrag(false, '#o');
        rd.enableDrag(true, '#x');
    }
    else {
        rd.enableDrag(true, '#o');
        rd.enableDrag(false, '#x');
    }
};

// method checks board (KISS - keep it simple and stupid;)
checkBoard = function (id, row_idx, cell_idx) {
    // set value for current cell (1 or -1)
    board[row_idx][cell_idx] = xo[id];
    // test rows
    checkLine(board[0][0] + board[0][1] + board[0][2]);
    checkLine(board[1][0] + board[1][1] + board[1][2]);
    checkLine(board[2][0] + board[2][1] + board[2][2]);
    // test columns
    checkLine(board[0][0] + board[1][0] + board[2][0]);
    checkLine(board[0][1] + board[1][1] + board[2][1]);
    checkLine(board[0][2] + board[1][2] + board[2][2]);
    // test diagonals
    checkLine(board[0][0] + board[1][1] + board[2][2]);
    checkLine(board[0][2] + board[1][1] + board[2][0]);
};

// method checks line (row, column or diagonal) for value 3 or -3
checkLine = function (value) {
    if (value === 3) {
        document.getElementById('message').innerHTML = 'X is the Winner!';
        rd.enableDrag(false); // disable all drag elements
    }
    else if (value === -3) {
        document.getElementById('message').innerHTML = 'O is the Winner!';
        rd.enableDrag(false); // disable all drag elements
    }
};

// add onload event listener
if (window.addEventListener) {
    window.addEventListener('load', redipsInit, false);
}
else if (window.attachEvent) {
    window.attachEvent('onload', redipsInit);
}

Package redips2.tar.gz contains source code and several examples including school timetable with save/recall table using PHP and MySQL.

21 thoughts on “JavaScript Drag and Drop example 4”

  2. Pingback: Redips.net – tabela chwyć i upuść w Ajax | Taipa.pl

  3. hey! hey! this is a cool article, thanks for posting, I can use this, very nice, keep it up.

  4. how can I understand the current situation of an object that is enable_drag is false or true .

    var myDiv = current_cell.childNodes[0].id  // for ie

var  stat = document.getElementById(myDiv).?????

    Thank you right now … I am waiting for you …

  6. Mehmet – “enabled” property is fixed in the latest REDIPS.drag library (version 2.6.1+). Instead of “init” it should be (boolean) true or false.

    Cheers!

  7. Mehmet – every DIV element has attached “enabled” property. For example, if DIV element has id=”xc1″, enabled property can be read on the following way:

    var enabled_flag = document.getElementById("xc1").enabled;

  8. if enable_drag is setted false it returns “false” but not it returns “init” , but I realised that my Library version looks ( Version 2.5.0) I will redownload and review and return to you . Thanks a lot again…

  9. Hi dbunic,

    Nice work. Thanks for sharing with community. Any hint on making drag handle kind of thing like allow drag only from a header part of drag-able div (window) contents not by entire div contents, similar to igoogle ?

    Regards

  10. @DSJ – REDIPS.drag library is upgraded. Please download latest version 2.8.1 and take a look at example 11. You will see DIV elements with drag handle on titlebar. Hope this is what you looking for.

  11. Hello, How can I realize such an effect:
    After I put the X or O in the right-hand-side table, I want to double click one of them (cloned element) and perform some actions. So how can I do that?

    Thanks

    beta (a newer in JS)

  12. @beta – This example is not a good one for ondblclick event because elements X and O are disabled after dropping to the right table. REDIPS.drag library contains myhandler_dblclicked() event handler where you can write JavaScript code.

  15. @Vikas Saini – Yes, you can define dropping rules for table cells like: only one element per table cell, only table cells with certain ID can be dropped to table cells with certain class name, completely forbid dropping to some table cell and so on. Please click on “preview” link below post title to see all examples contained in redips2.tar.gz package.

  16. Hello,
    I am new to web development. How can I run this source code. I want to divide my screen into vertical menu bar (left hand side) and want to drag the icons into (right hand side frame) how can I do this using JavaScript?
    Please help.

  17. @chandrakant – REDIPS.drag library is specialized for drag and drop DIV elements across HTML tables – so you’re in right place. ;)

    JavaScript code is primarily used and executed on client side – in browsers. Thanks to Ryan Dahl and node.js, JavaScript focus shifts slightly to the server side as well. Anyway, the best example to start for your case would be Example 3: School timetable. On the left side is collection of school subjects while on the right is timetable. User selects and moves subjects (simply said drag-n-drop) to the table on the right. Both sides are actually plain HTML tables inside DIV containers placed side by side. Inside redips2.tar.gz package you will find all sources, instructions to create MySQL table and how to configure PHP script. Or you can try static example03 (should work without any configuration).

  18. Love the work you have done here. I have your example05 working with a single column multi-row scrollable source table and a single column multi-row scrollable target table. What I need to know is at the point of the onmouseup (assuming the drag and drop is aligned properly) how do I find the id of the source cell and the id of the target cell. In my application I do not want to actuall drop an item just make it look like its going to. At the instant of onmouseup successful I will need to document.location to another non display action page, passing these 2 id’s, run a SQL stored procedure, and then return to the page for any followup drag and dropping. How do I get these 2 id’s?

    Thanks,
    Mike

  19. @mikeysrig – REDIPS.drag library contains source_cell and target_cell public properties. So in your script you can set table cells Id on the following way:

    // set reference to the REDIPS.drag library
var rd = REDIPS.drag;

// event handler executed before element is dropped to the table cell
rd.myhandler_dropped_before = function () {
    // define id for source and target table cell
    var id1 = rd.source_cell.id,
        id2 = rd.target_cell.id;
    // if element is moved from cell 'c11' to 'c12' then return
    // element to start position (control example)
    if (id1 === 'c11' && id2 === 'c12') {
        return false;
    }
};

    If myhandler_dropped_before() event handler returns false, then dragged DIV element will be returned to the source position.

  20. Cool. Thanks for the fast response. Follow up question: can you tell me where to have the source_cell background stay the color of the cell when its moved even after the target cell is hovered over?

Leave a Comment