Drag n Drop panels are great to let the user control how he/she wants to see the information as he can arrange various information blocks according to his preference. This type of functionality is often provided by web portals or personal homepage services like iGoogle.
Codde copied from the http://webdeveloperplus.com/jquery/collpasible-drag-drop-panels/
Forked from galaxija737's Pen Collapsible Drag & Drop Panels.
| <!-- Copied from http://webdeveloperplus.com/jquery/collpasible-drag-drop-panels/ --> | |
| <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> |
| $(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 src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script> |
| .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; | |
| } |
| <link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" rel="stylesheet" /> |