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>
Pingback: Scholarships For Minorities Grenloch
Pingback: iasbet
Pingback: Smart Shopping at Bed Bath and Beyond
Pingback: seo
Pingback: fidelity auto warranty reviews
Pingback: proactol diet pills
Pingback: How to Get Bed Bath and Beyond Coupons
Pingback: youtube star wars old republic
Pingback: scoundrel skills
Pingback: Click here for info
Pingback: ?嗉頃
Hey there I must say I revere your principals. As a Boston Cab driver I meet all kinds of people and now I just can`t get enough. As soon as I drop off my Boston Taxi I come right home and fire up my computer looking for entertaining and informative blogs like this one. The next time you are around zip code 02127 Southie Massachusetts stop by and see us!
Anything to your wise is enough
Thanks for the interesting article, love what you’ve written.
Jasa Setting Mikrotik dan Proxy Cepat