table arranger 0.2 - magikarr

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><div class="swap left">
<img src="http://127.0.0.1/otherpeople/trans.gif" class="arrowl"><img src="http://127.0.0.1/otherpeople/trans.gif" class="arrowr">
</div><div class="swap top">
<img src="http://127.0.0.1/otherpeople/trans.gif" class="arrowd"><img src="http://127.0.0.1/otherpeople/trans.gif" class="arrowu">
</div>4</td>
            <td><div class="swap left">
<img src="http://127.0.0.1/otherpeople/trans.gif" class="arrowl"><img src="http://127.0.0.1/otherpeople/trans.gif" class="arrowr">
</div><div class="swap top">
<img src="http://127.0.0.1/otherpeople/trans.gif" class="arrowd"><img src="http://127.0.0.1/otherpeople/trans.gif" class="arrowu">
</div>5</td>
            <td><div class="swap left">
<img src="http://127.0.0.1/otherpeople/trans.gif" class="arrowl"><img src="http://127.0.0.1/otherpeople/trans.gif" class="arrowr">
</div><div class="swap top">
<img src="http://127.0.0.1/otherpeople/trans.gif" class="arrowd"><img src="http://127.0.0.1/otherpeople/trans.gif" class="arrowu">
</div>6</td>
        </tr>
        <tr>
            <td><div class="swap left">
<img src="http://127.0.0.1/otherpeople/trans.gif" class="arrowl"><img src="http://127.0.0.1/otherpeople/trans.gif" class="arrowr">
</div><div class="swap top">
<img src="http://127.0.0.1/otherpeople/trans.gif" class="arrowd"><img src="http://127.0.0.1/otherpeople/trans.gif"...

CSS

.cellcontent { 
    position:relative;
    top:0px;
}
TR {
}
TD {
    width: 200px;
    height: 220px;
    vertical-align: middle;
    position: relative;
    text-align: right;
}
.swap.left {
    ZZborder: 1px solid gold;
    position:relative;
    left:-50%;
    top:66px; /* 220/2-44 */
    background-color: #fff;
    
}
.swap.top {
    position: relative;
    Zclear:both;
    top: -160px; /* 55x2-44 */
    Zleft: 1em; /* 200/2-27 */
    Zleft:66px;
    background-color:#fff;
    margin-left: 45px;
    border: 1px dotted #fff;
}

.swap {
    -webkit-transition-property: width,height;
    -webkit-transition-duration: 600ms;    
}
.swap IMG {
   -webkit-transition-property: width,height,background-color;
    -webkit-transition-duration: 700ms;
}


.swap.left {
    height: 88px;
    width: 30px;
    margin: 0 auto 0 auto;
}
.swap IMG {
    ZZborder: 1px dotted fuchsia;
    background-color: #a2a2a2;
     
}
.swap.left IMG {
    height: 55px;
    width: 15px;
    background-image: url(http://127.0.0.1/otherpeople/jsfiddles/2GGaL/swap-left.png);
}
.swap.left.firehover {
    width: 110px;
    ZZleft: -57px;
}
.swap.left.firehover IMG {
    width: 55px;
    background-color: #555;
}
.swap.left IMG.arrowl {
    background-position: top left;
    float: left;
}
.swap.left IMG.arrowr {
    background-position: top right ;
    float: right;
    clear:both;
    top: -30px;
    position: relative;
}

.swap.top {
    width: 88px;
    height:30px;
}
.swap.top IMG {
    height: 15px;
    width: 55px;
    background-image: url(http://127.0.0.1/otherpeople/jsfiddles/2GGaL/swap-top.png);
    ZZborder:1px solid fuchsia;
}
.swap.top IMG.arrowd {
    background-position:top left;
    float:left;
}
.swap.top IMG.arrowu {
    background-position:bottom left;
    ZZclear:both;
    float:right;
    position: relative;
    ZZtop: -7px;
    left: -6px;
}
.swap.top.firehover {
    height: 110px;
}
.swap.top.firehover IMG {
    height: 55px;
    background-color: #555;
}

DIV.swap {
   ...

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);
    }
});

            
/* we have to use mo because IE retains hover state on swap'd el */
    $$('.swap').addEvents({
        'mouseover':function(){this.addClass('firehover');}
        ,'mouseout':function(){this.removeClass('firehover');}
    });

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

$$('DIV.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;
});