table arranger

by sanford

HTML

<table cellpadding=10 cellspacing="4" border="1" bgcolor="#FFFFFF">
    <tbody>
        <tr>
            <td><img src="http://127.0.0.1/otherpeople/trans.gif" class="swap left"><img src="http://127.0.0.1/otherpeople/trans.gif" class="swap top">1</td>
            <td><img src="http://127.0.0.1/otherpeople/trans.gif" class="swap left"><img src="http://127.0.0.1/otherpeople/trans.gif" class="swap top">2</td>
            <td><img src="http://127.0.0.1/otherpeople/trans.gif" class="swap left"><img src="http://127.0.0.1/otherpeople/trans.gif" class="swap top">3</td>
        </tr>

        <tr>
            <td><img src="http://127.0.0.1/otherpeople/trans.gif" class="swap left"><img src="http://127.0.0.1/otherpeople/trans.gif" class="swap top">4</td>
            <td><img src="http://127.0.0.1/otherpeople/trans.gif" class="swap left"><img src="http://127.0.0.1/otherpeople/trans.gif" class="swap top">5</td>
            <td><img src="http://127.0.0.1/otherpeople/trans.gif" class="swap left"><img src="http://127.0.0.1/otherpeople/trans.gif" class="swap top">6</td>
        </tr>
        <tr>
            <td><img src="http://127.0.0.1/otherpeople/trans.gif" class="swap left"><img src="http://127.0.0.1/otherpeople/trans.gif" class="swap top">7</td>
            <td><img src="http://127.0.0.1/otherpeople/trans.gif" class="swap left"><img src="http://127.0.0.1/otherpeople/trans.gif" class="swap top">8</td>
            <td><img src="http://127.0.0.1/otherpeople/trans.gif" class="swap left"><img src="http://127.0.0.1/otherpeople/trans.gif" class="swap top">9</td>
        </tr>
    </tbody>
</table>

CSS

TD {
    width: 200px;
    height: 220px;
    vertical-align: top;
}
IMG.swap {
    width:55px;
    height:55px;
    display: block;
    background-image: url(http://127.0.0.1/otherpeople/jsfiddles/2GGaL/arrange.png);
    background-color: #ffffff;
    -webkit-transition-property: background-color;
    -webkit-transition-duration: 250ms;
}
IMG.swap.left {
    position:relative;
    left:-27px;
    top:83px; /* 220/2-27 */
}
IMG.swap.top {
    position: relative;
    top: -83px; /* 55x2-27 */
    left: 73px; /* 200/2-27 */
    background-position: -55px 0;
}
IMG.swap.firehover {
    background-color: #555555;
}
IMG.swap.left.firehover {
    background-position: 0 -55px;
}
IMG.swap.top.firehover {
    background-position: -55px -55px;
}

IMG.swap {
    visibility: hidden;
}
TR + TR IMG.swap.top {
    visibility: visible;
}
TD + TD IMG.swap.left {
    visibility: visible;
}

JavaScript

'swapNode' in document.documentElement || Element.implement({
    swapNode: function(other) {
            other = $(other);
            var next = other.nextSibling, parent = other.parentNode;
            this.parentNode.replaceChild(other, this);
            return parent.insertBefore(this, next);
    }
});

$$('IMG.swap.left').addEvent(
    'click',function(){
    // swap with the left sibling of the host TD 
    this.getParent().swapNode(this.getParent().getPrevious());
    this.removeClass('firehover');
        
});

$$('IMG.swap.top').addEvent('click',function(){
  // get the 'sibling index' of this swapper's host TD
  var whereami = this.getParent().getAllPrevious('TD').length;
 // swap with one right above
  this.getParent().swapNode(this.getParent('TR').getPrevious().getChildren('TD')[whereami]);
    this.removeClass('firehover');
   // debugger;
});
            
/* we have to use mo because IE retains hover state on swap'd el */
$$('IMG.swap').addEvents({
    'mouseover':function(){
        this.addClass('firehover');
    },
    'mouseout':function(){
        this.removeClass('firehover');
    }

});