Dragable divs

[Craig Hopson]

hi guys i have a few questions about dragable divs hers the codeHTML

<div id="box1"><div class="boxtop1">BOX 1<a href="#" class="show_hide">Show/Hide</a></div><div class="boxcont1">This is some content<a href="#">THIS IS A LINK</a></div> </div><div id="box2"><div class="boxtop2">BOX 2<a href="#" class="show_hide2">Show/Hide</a></div><div class="boxcont2">This is some content<a href="#">THIS IS A LINK</a></div></div>

JQuary

$(document).ready(function() {	$("#box1").draggable({		containment: 'parent' ,		snap: "#box1", snapMode: "inner" ,		snapTolerance: 3	  	});  });  $(document).ready(function() {	$("#box2").draggable({		containment: 'parent' ,		snap: "#box2", snapMode: "inner" ,		snapTolerance: 3	  	});  });

CSS

#box1 {border: solid 2px #b7ddf2;background: url('plugins/Login/templates/backg.png') no-repeat center center ;background-size:cover;border-radius: 6px;-webkit-border-radius: 6px;-moz-border-radius: 6px;width:470px;position:fixed;top:30px;left:5px;z-index:1;}.boxtop1{background:red;width:100%;height:25px;border-bottom:1px solid;border-radius: 4px;-webkit-border-radius: 4px;-moz-border-radius: 4px;}.boxcont1{height:240px;}.show_hide1{float:right;}#box2 {border: solid 2px #b7ddf2;background: url('plugins/Login/templates/backg.png') no-repeat center center ;background-size:cover;border-radius: 6px;-webkit-border-radius: 6px;-moz-border-radius: 6px;width:470px;position:fixed;top:30px;right:5px;z-index:1;}.boxtop2{background:red;width:100%;height:25px;border-bottom:1px solid;border-radius: 4px;-webkit-border-radius: 4px;-moz-border-radius: 4px;}.boxcont2{height:240px;}.show_hide2{float:right;}

OkProblem 1 THE SIZE all this code i have 6 boxes so i have 6 lots of codeQ1:How do i reduce the amont off code Problem 2 div #box1 is always under #box2, #box1 & #box2 is under #box3 and so on (after moving them about)Q2:how to make the last moved box ontop Demo chsites.co.uk/chsites.php?page=project

Edited September 5, 2012 by Craig Hopson

[justsomeguy]

You should use classes instead of IDs for the CSS and jQuery. Give each box the same class, e.g.: <div id="box1" class="draggable-box"> And then make the CSS rules for .draggable-box instead of a set of duplicate rules for each ID. With jQuery you can target elements by class instead of ID also:

$(".draggable-box").draggable({containment: 'parent' , snap: this, snapMode: "inner" ,snapTolerance: 3 });

For the z-index issue, you would probably need to use a handler for the element's drag event if it has one where you set the z-index of all draggables to 1 and then set the index of the one being dragged higher so that it always appears on top.

[Craig Hopson]

Thanks that work fine for reducing the CSS size still the z-index issue and while im here how can i reduce this

$(document).ready(function(){		 $(".boxcont").show();    $('.show_hide').click(function(){    $(".boxcont").slideToggle();    });});$(document).ready(function(){	    $(".boxcont2").show();    $('.show_hide2').click(function(){    $(".boxcont2").slideToggle();    });});$(document).ready(function(){	    $(".boxcont3").show();    $('.show_hide3').click(function(){    $(".boxcont3").slideToggle();    });});$(document).ready(function(){	    $(".boxcont4").show();    $('.show_hide4').click(function(){    $(".boxcont4").slideToggle();    });});

[dsonesuk]

add and remove a class that would have a higher z-index

$(document).ready(function() {	    $(".box").draggable({			    containment: 'parent' ,			    snap: ".box", snapMode: "inner" ,			    snapTolerance: 3		 	    });        $(".box").mousedown(function(){        $(".box").removeClass("active_box");        $(this).addClass("active_box");	   	    });                       });

.box {border: solid 2px #b7ddf2;background: url('plugins/Login/templates/backg.png') no-repeat center center ;background-size:cover;border-radius: 6px;-webkit-border-radius: 6px;-moz-border-radius: 6px;width:470px;position:fixed;top:30px;left:5px;z-index:5;}.active_box{ z-index: 50; background-color:#CC00CC;}.boxtop{background:red;width:100%;height:25px;border-bottom:1px solid;border-radius: 4px;-webkit-border-radius: 4px;-moz-border-radius: 4px;}.boxcont{height:240px;}.show_hide{float:right;}

<div class="box"><div class="boxtop">BOX 1<a href="#" class="show_hide">Show/Hide</a></div><div class="boxcont">This is some content<a href="#">THIS IS A LINK</a></div> </div><div class="box"><div class="boxtop">BOX 2<a href="#" class="show_hide">Show/Hide</a></div><div class="boxcont">This is some content<a href="#">THIS IS A LINK</a></div></div>