Collapsible Drag & Drop Panels Using jQuery
Here’s a pretty neat interface design from WebDevelop+ which I think some of you might want to adapt to your website. It’s a collapsible drag and drop panel that allows your users to control how they want to see the information on your site.
Check out the DEMO.
If you think that this type of user interface looks familiar, that’s because aside from several number of web portals and personal homepages, well-known sites like iGoogle and WordPress (i.e. dashboard) also use it.
In this tutorial, you’ll learn how to create this interface using jQuery and some of its UI libraries (be sure to get the latest version of both).
We’ll start off with the HTML markup. In this example, we have a total of five panels divided into two columns.
<script type="text/javascript" >
$(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');
}); $('.column').sortable({
connectWith: '.column',
handle: 'h2',
cursor: 'move',
placeholder: 'placeholder',
forcePlaceholderSize: true,
opacity: 0.4,
stop: function(event, ui){
$(ui.item).find('h2').click();
var sortorder='';
$('.column').each(function(){
var itemorder=$(this).sortable('toArray');
var columnId=$(this).attr('id');
sortorder+=columnId+'='+itemorder.toString()+'&';
});
alert('SortOrder: '+sortorder);
/*Pass sortorder variable to server using ajax to save state*/
}
})
.disableSelection();
});
</script>
JavaScript:
<script type="text/javascript" >
$(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');
}); $('.column').sortable({
connectWith: '.column',
handle: 'h2',
cursor: 'move',
placeholder: 'placeholder',
forcePlaceholderSize: true,
opacity: 0.4,
stop: function(event, ui){
$(ui.item).find('h2').click();
var sortorder='';
$('.column').each(function(){
var itemorder=$(this).sortable('toArray');
var columnId=$(this).attr('id');
sortorder+=columnId+'='+itemorder.toString()+'&';
});
alert('SortOrder: '+sortorder);
/*Pass sortorder variable to server using ajax to save state*/
}
})
.disableSelection();
}); </script>
Explaining the .sortable() function:
- connectWith – lets you move the panels across columns.
- handle – defines the tag which is used to drag the panel.
- placeholder – the CSS class used 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
- opacity – sets opacity of the panel while dragging.
- stop – restores original state of the content panel once drag is complete.
I decided to exclude the CSS part of the coding process here since it only deals mainly with the appearance of the panels, which you can pretty much do on your own if you’re familiar with CSS. If you’d like to see how the code’s original author created it, you can always download the source file.
The code’s author also made a follow up post for this tutorial that shows you how you can save the current position or state of the panels upon refresh or postback. You can find it HERE.
0
471
