Creating Collapsible - Drag and Drop Panels

Creating Collapsible – Drag and Drop Panels

Nov 03 2009

Drag and Drop panels are commonly used in home pages of users as well as administrator. It helps user to control what all the information block to de displayed according to his preference. This type of functionality is often provided by web portals or personal homepage services like iGoogle. wordpress admin page.. etc

In this post I am sharing post written by Web Developer +

How to use?

Insert the jquery and jQuery UI libraries to the header section of html

<script type="text/javascript" src="js/jquery-1.3.2.js" ></script>
<script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js" ></script>

The HTML Structure is as follows.
In the example there is two vertical columns defined by div with class=”column” that hold our panels. You can increase the number of panels by adjusting the width in the style sheet for .column. Each panel is a div with class=”dragbox”. And the content of each panel resides within div
with class=”dragbox-content”.

	<div class="column" id="column1">
		<div class="dragbox" id="item1" >
			<h2>Handle 1</h2>
			<div class="dragbox-content" >
				<!-- Panel Content Here -->
			</div>
		</div>
		<div class="dragbox" id="item2" >
			<h2><span class="configure" ><a href="#" >Configure</a></span>Handle 2</h2>
			<div class="dragbox-content" >
				<!-- Panel Content Here -->
			</div>
		</div>
		<div class="dragbox" id="item3" >
			<h2>Handle 3</h2>
			<div class="dragbox-content" >
				<!-- Panel Content Here -->
			</div>
		</div>
	</div>
	<div class="column" id="column2" >
		<div class="dragbox" id="item4" >
			<h2>Handle 4</h2>
			<div class="dragbox-content" >
				<!-- Panel Content Here-->
			</div>
		</div>
		<div class="dragbox" id="item5" >
			<h2>Handle 5</h2>
			<div class="dragbox-content" >
				<!--Panel Content Here-->
			</div>
		</div>
	</div>

The CSS code

.column{
	width:49%;
	margin-right:.5%;
	min-height:300px;
	background:#fff;
	float:left;
}
.column .dragbox{
	margin:5px 2px  20px;
	background:#fff;
	position:relative;
	border:1px solid #ddd;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
}
.column .dragbox h2{
	margin:0;
	font-size:12px;
	padding:5px;
	background:#f0f0f0;
	color:#000;
	border-bottom:1px solid #eee;
	font-family:Verdana;
	cursor:move;
}
.dragbox-content{
	background:#fff;
	min-height:100px; margin:5px;
	font-family:'Lucida Grande', Verdana; font-size:0.8em; line-height:1.5em;
}
.column  .placeholder{
	background: #f0f0f0;
	border:1px dashed #ddd;
}
.dragbox h2.collapse{
	background:#f0f0f0 url('collapse.png') no-repeat top right;
}
.dragbox h2 .configure{
	font-size:11px; font-weight:normal;
	margin-right:30px; float:right;
}

The JavaScript Code
This code is to make the boxes dragable and droppable for this we will be using Portables function from jQuery UI library.

$('.column').sortable({
    connectWith: '.column',
    handle: 'h2',
    cursor: 'move',
    placeholder: 'placeholder',
    forcePlaceholderSize: true,
    opacity: 0.4,
})
.disableSelection();

In this the connectWith lets you move panels across different columns and handle defines the tag which is used to drag the panel. The placeholder parameter is the CSS class to use for the panel placeholder which is displayed when you drag a panel to show the possible position of the dragged panel. forcePlaceholderSize makes sure that placeholder size is equal to the size of the dragged panel and at last opacity sets the opacity of the panel while dragging.
To collapse the content of a panel box when you click on the panel header and show the configure link on panel header on hover, use the below code in jQuery document ready function.

$('.dragbox').each(function(){
    $(this).hover(function(){
        $(this).find('h2').addClass('collapse');
    }, function(){
        $(this).find('h2').removeClass('collapse');
    })
    .find('h2').hover(function(){
        $(this).find('.configure').css('visibility', 'visible');
    }, function(){
        $(this).find('.configure').css('visibility', 'hidden');
    })
    .click(function(){
        $(this).siblings('.dragbox-content').toggle();
    })
    .end()
    .find('.configure').css('visibility', 'hidden');
});

One thing you’ll notice after adding this code is that when you drag the panel, the content of the panel toggles as when you drag the click event of panel header also fires that toggles the state of content. To fix this, you need to add another parameter to storable so that when drag is finished, state of content does not toggle.

$('.column').sortable({
    connectWith: '.column',
    handle: 'h2',
    cursor: 'move',
    placeholder: 'placeholder',
    forcePlaceholderSize: true,
    opacity: 0.4,
    stop: function(event, ui){
        $(ui.item).find('h2').click();
    }
})
.disableSelection();

Here I added another parameter stop that defines the function to use when drag is complete. Once the drag is complete, click event of panel header is fired so that the original state of content is restored.

You can view the demo here
Download the source file from here.