Я бы хотел разместить элементы в двух разных столбцах, чтобы можно было легко перетаскивать их из одного столбца в другой.Сохраните порядок в localStorage, чтобы сохранить макет при загрузке страницы.
Это то, что у меня есть:
(с огромной благодарностью). Это основа моего кода: http://webdeveloperplus.com/jquery/collpasible-drag-drop-panels/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Drag Drop Panels - Web Developer Plus Demos</title>
<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>
<link rel="stylesheet" type="text/css" href="styles.css" />
<link rel="stylesheet" type="text/css" href="print.css" />
<script type="text/javascript" >
$(function(){
$(document).ready(function(){
var data = JSON.parse(localStorage.getItem("order"));
$.each(data, function(i, val) {
var columnId = data[i]["columnId"];
var itemorder = data[i]["itemorder"];
var orderArray = itemorder.toString().split(',');
var listArray = $('.column .dragbox');
for (var i = 0; i < orderArray.length; i++) {
$('.column').append(listArray[orderArray[i]-1]);
}
});
});
$('.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='';
var dataSave = [];
$('.column').each(function(){
var columnId=$(this).attr('id');
var itemorder=$(this).sortable('toArray');
item = {
'columnId':columnId,
'itemorder':itemorder,
};
dataSave.push(item);
localStorage.setItem("order", JSON.stringify(dataSave));
});
}
})
.disableSelection();
});
</script>
</head>
<body>
<h3>Drag n Drop Panels</h3>
<div class="column" id="column1">
<div class="dragbox" id="1" >
<h2>Handle 1</h2>
<div class="dragbox-content" > This is a panel. </div>
</div>
<div class="dragbox" id="2" >
<h2>Handle 2</h2>
<div class="dragbox-content" > This is a panel. </div>
</div>
<div class="dragbox" id="3" >
<h2>Handle 3</h2>
<div class="dragbox-content" > This is a panel. </div>
</div>
</div>
<div class="column" id="column2" >
<div class="dragbox" id="4" >
<h2>Handle 4</h2>
<div class="dragbox-content" > This is a panel. </div>
</div>
<div class="dragbox" id="5" >
<h2>Handle 5</h2>
<div class="dragbox-content" > This is a panel. </div>
</div>
<div class="dragbox" id="6" >
<h2>Handle 6</h2>
<div class="dragbox-content" > This is a panel. </div>
</div>
</div>
</body>
</html>