Question

I’m creating an image wall using Mootools “The Wall” plugin. Its getting created without any issues on initWall() but if I wrap the Images in an “a” tag, After the drag is finished, the link is clicked and I’m transported to the href, even though I haven’t clicked it. Here’s my code

window.addEvent("domready", function() {
new Wall("wall", {
width: 260,
height: 180,
rangex: [-10,10],
rangey: [-10,10],
inertia: true,
callOnUpdate: function(items) {
  items.each(function(item) {
    var a=new Element("a",{
        href:"post.php",
        styles: {
            opacity: 0
            }
        });
    var img=new Element("img",{
        src:"img/260x180.gif"
        });
    img.inject(a);
    a.inject(item.node).fade(1);
  });
}
}).initWall();  
});

The resulting HTML is this

<div class="tile" col="-1" row="-1" rel="-1x-1" style="position: absolute; left: -260px; top: -180px; width: 260px; height: 180px; ">
    <a href="post.php" style="visibility: visible; zoom: 1; opacity: 1; ">
        <img src="img/260x180.gif">
    </a>
</div>

How can I make the item itself as the outermost class, so the item looks like

<a href="post.php" class="tile" col="-1" row="-1" rel="-1x-1" style="position: absolute; left: -260px; top: -180px; width: 260px; height: 180px; ">
    <img src="img/260x180.gif">
</a>

Update: Answered
OK. figured it out myself. Needed to add an “click” event handler and use the getMovement function.

a.addEvent("click",function(e){
if( wall.getMovement() ){
    e.stop();
    }
});

Answer 1

OK. figured it out myself. Needed to add an “click” event handler and use the getMovement function.

a.addEvent("click",function(e){
if( wall.getMovement() ){
    e.stop();
    }
});