REDIPS.drag example 5

CSS transitions (zoom on hover)

by s sc

HTML

<script src="https://cdn.rawgit.com/dbunic/REDIPS_drag/master/redips-drag-min.js"></script>
<a href="http://www.redips.net/javascript/drag-and-drop-table-content/" target="_new">REDIPS.drag</a>
<br/>
<br/>

<!-- drag container -->
<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></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/>
CSS transitions (zoom on hover)

CSS

/* drag objects (DIV inside table cells) */
.redips-drag {
    cursor: move;
    margin: auto;
    /* transition - for hover */
    transition: width 0.2s, height 0.2s;
    background-color: white;
    font-size: 18pt; /* needed for cloned object */
    width: 80px;
    height: 25px;
    /* round corners */
    border-radius: 8px; /* Opera, Chrome */
    -moz-border-radius: 8px; /* FF */
    /* needed for vertical text alignment in DIV element */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* style applied on hover */
.redips-drag:hover {
    width: 85px;
    height: 31px;
}

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

/* TD 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;
}

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

body {
    font-family: arial;
}

JavaScript

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


// initialization
redips.init = function () {
    // init REDIPS.drag library
    REDIPS.drag.init();
};

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