Play with Div using jQuery or Javascript

Question

Hi....

I want to move specific div to up on the up link. Same as to move div to down on the down link. As shown in screenshot, same as i want to insert div before specific div on the 'IB' link. I want to insert div after specific div on the 'IA' link. To delete specific div on the 'D' link.

screenshot

Now of course there will be many alternatives are available to achieve above features like jquery, normal javascript, etc.

But I would like to know that which will be the best way to achieve this.

Any feedback would be highly appreciated...!

EDIT : screenshot link is up now !!

Answer 1

Hello Hitesh,

Have you looked at the Jquery-UI Sortable code, it may not be exactly what you need, but it is an option.

Answer 2

jQuery definately makes this sort of thing a bunch easier.

Given this simple markup:

<div class="moveable" id="div1">
    One
    <a href='#' class="up">Move up</a>
    <a href='#' class="down">Move down</a><br/>
</div>
<div class="moveable" id="div2">
    Two
    <a href='#' class="up">Move up</a>
    <a href='#' class="down">Move down</a><br/>
</div>
<div class="moveable" id="div3">
    Three
    <a href='#' class="up">Move up</a>
    <a href='#' class="down">Move down</a><br/>
</div>

This jQuery will move an element up or down:

$('.moveable a.up').live('click',function(){
    var $div = $(this).parent('.moveable');
    var idx = $div.index();
    if(idx>0){          
        $div.remove();
        $('div.moveable:eq(' + (idx-1) +')').before($div);
    }
    return false;
});
$('.moveable a.down').live('click',function(){
    var $div = $(this).parent('.moveable');
    var idx = $div.index();
    if(idx<$('div.moveable').length-1){         
        $div.remove();
        $('div.moveable:eq(' + idx +')').after($div);
    }
    return false;
});

That should give you enough to go on to start doing an insert too.

Here's the fiddle if you want a demo: http://jsfiddle.net/5hF98/