Drag & Drop Panels using jQuery
Few days ago I found new theme on BBC World News Home webpage. The home page contains very new idea and this attracted me. I further google it and found they used jQuery for this purpose. The idea was implemented on home page, dragging and dropping.
After one hour googling I found some jQuery libraries on Google.com about this. Details are given below.
- Download two jQuery Libraries from
- jquery-1.3.2.js from http://docs.jquery.com/Downloading_jQuery
- and jquery-ui-1.7.2.custom.min.js from http://code.google.com/p/ga-api-javascript-samples/source/browse/trunk/src/explorer/js/jquery-ui-1.7.2.custom.min.js?r=4
- Create a folder name it js and save these into that directory
- Now create an HTML page
- Add following code after <title></title> tag
- <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>
- Create CSS file
- Add following 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;
}
- Add following code after <script> </script>
- <link rel=”stylesheet” href=”styles.css” />
- After that add code
<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>
- Note all code should be add before </head>
- Now add following code in <body>
<h3>Drag n Drop Panels</h3>
<div id=”column1″>
<div class=”dragbox” >
<h2>Heading1</h2>
<div class=”dragbox-content” >this is testing this is testing this is testing this is testing this is testing this is testing this is testing
this is testing this is testing this is testing this is testing this is testing this is testing this is testing this is testing this is testing this is testing this is testing this is testing this is testing this is testing this is testing this is testing this is testing </div>
</div>
<div class=”dragbox” >
<h2>Heading2</h2>
<div class=”dragbox-content” >
this is testing this is testing this is testing this is testing this is testing this is testing this is testing this is testing this is testing this is testing this is testing this is testing this is testing this is testing this is testing this is testing this is testing this is testing this is testing this is testing this is testing this is testing this is testing this is testing this is testing this is testing this is testing this is testing this is testing this is testing this is testing this is testing
</div>
</div>
<div class=”dragbox” >
<h2>Heading3</h2>
<div class=”dragbox-content” >
this is testing this is testing this is testing this is testing this is testing this is testing this is testing this is testing this is testing this is testing this is testing this is testing this is testing this is testing this is testing this is testing this is testing this is testing this is testing this is testing this is testing this is testing this is testing
</div>
</div>
</div>
<div id=”column2″ >
<div class=”dragbox” >
<h2>Heading4</h2>
<div class=”dragbox-content” >
this is testing this is testing this is testing this is testing this is testing this is testing this is testing this is testing this is testing this is testing this is testing this is testing this is testing this is testing this is testing this is testing this is testing this is testing this is testing this is testing this is testing this is testing this is testing this is testing this is testing this is testing this is testing this is testing this is testing this is testing this is testing this is testing this is testing this is testing this is testing this is testing this is testing this is testing this is testing this is testing this is testing this is testing this is testing this is testing
</div>
</div>
<div class=”dragbox” >
<h2>Heading5</h2>
<div class=”dragbox-content” >
this is testing this is testing this is testing this is testing this is testing this is testing this is testing this is testing this is testing this is testing this is testing this is testing this is testing this is testing this is testing this is testing this is testing this is testing this is testing this is testing this is testing this is testing this is testing this is testing this is testing this is testing
</div>
</div>
</div>
<hr style=”clear:both;” />
<p> </p>