Drag and Drop

Drag and Drop

by jimkennelly

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="https://cdn.rawgit.com/dbunic/REDIPS_drag/master/redips-drag-min.js"></script>

<div id="redips-drag">
    <!-- table1 -->
    <table id="table1">
        <colgroup>
            <col width="100"/>
            <col width="100"/>
            <col width="100"/>
        </colgroup>
        <tbody>
            <!-- clone 2 elements -->
            <tr>
                <td><div id="a" class="redips-drag redips-clone orange">A</div></td>
                <td><div id="b" class="redips-drag redips-clone green">B</div></td>
                <td class="redips-trash">Trash</td>
            </tr>
        </tbody>
    </table>
    <!-- table2 -->
    <table id="table2">
        <colgroup>
            <col width="100"/>
            <col width="100"/>
            <col width="100"/>
            <col width="100"/>
        </colgroup>
        <tbody>
        <tr>
    <td class="redips-mark">You</td>
    <td class="redips-mark">can</td>
    <td class="redips-mark">not</td>
    <td class="redips-mark">drop</td>

</tr>
            <tr><td></td><td></td><td></td><td></td></tr>
            <tr><td></td><td></td><td></td><td></td></tr>
            <tr><td></td><td></td><td></td><td></td></tr>
            <tr><td></td><td></td><td></td><td></td></tr>
        </tbody>
    </table>
</div>

<br/>
- change style of DIV element

CSS

/* Latest compiled and minified CSS included as External Resource*/

/* Optional theme */
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');

body {
    margin: 10px;
}

/* drag objects (DIV inside table cells) */
.redips-drag {
    cursor: move;
    margin: auto;
    background-color: white;
    text-align: center;
    font-size: 6pt; /* needed for cloned object */
    width: 87px;
    height: 35px;
    line-height: 35px;
    /* round corners */
    border-radius: 4px; /* Opera, Chrome */
    -moz-border-radius: 4px; /* FF */
}

/* tables */
div#redips-drag table {
    background-color: #eee;
    border-collapse: collapse;
    margin: 10px;
}

/* table cells */
div#redips-drag td {
    border: 1px #DDC5B5 solid;
    height: 50px;
    text-align: center;
    font-size: 10pt;
    padding: 2px;
}

/* green objects */
.green {
    border: 2px solid #499B33;
}

/* orange objects */
.orange {
    border: 2px solid #BF6A30;
}
.yellow {
    border: 2px solid yellow;
}


/* trash cell */
.redips-trash {
    color: white;
    background-color: SteelBlue;
}

body {
    font-family: arial;
}

JavaScript

/* Latest compiled and minified JavaScript included as External Resource */

// create container needed for methods below
var redips = {};

// initialization
redips.init = function () {
    // reference to the REDIPS.drag library
    var rd = REDIPS.drag;
    // initialization
    rd.init();
    // set hover color
    rd.hover.colorTd = 'yellow';

};

// change style of DIV elements for TD element
// obj - dragged DIV element
// td - reference of TD cell
// color - set color to DIV elements


redips.event.changed = function () {
  // get current position (method returns positions as array)
  var pos = rd.getPosition();
  // display current row and current cell
  console.log('Changed: ' + pos[1] + ' ' + pos[2]);
};

 redips.init();