jQuery:将图块排序为两列。默认订单存储在 localStorage 中
jQuery: Sort tiles to two columns. Default order stored in localStorage
我想将项目放在两个不同的列中,并且可以灵活地从一列拖放到另一列。将订单保存在 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>
查看 jQuery UI 可排序 Portlet:https://jqueryui.com/sortable/#portlets
这样您就可以将面板放入默认区域。
$(function() {
$(".column").sortable({
connectWith: ".column",
handle: ".portlet-header",
cancel: ".portlet-toggle",
placeholder: "portlet-placeholder ui-corner-all"
});
$(".portlet")
.addClass("ui-widget ui-widget-content ui-helper-clearfix ui-corner-all")
.find(".portlet-header")
.addClass("ui-widget-header ui-corner-all")
.prepend("<span class='ui-icon ui-icon-minusthick portlet-toggle'></span>");
$(".portlet-toggle").on("click", function() {
var icon = $(this);
icon.toggleClass("ui-icon-minusthick ui-icon-plusthick");
icon.closest(".portlet").find(".portlet-content").toggle();
});
});
body {
min-width: 520px;
}
.column {
width: 170px;
float: left;
padding-bottom: 100px;
}
.portlet {
margin: 0 1em 1em 0;
padding: 0.3em;
}
.portlet-header {
padding: 0.2em 0.3em;
margin-bottom: 0.5em;
position: relative;
}
.portlet-toggle {
position: absolute;
top: 50%;
right: 0;
margin-top: -8px;
}
.portlet-content {
padding: 0.4em;
}
.portlet-placeholder {
border: 1px dotted black;
margin: 0 1em 1em 0;
height: 50px;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="column">
<div class="portlet">
<div class="portlet-header">Feeds</div>
<div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
<div class="portlet">
<div class="portlet-header">News</div>
<div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
</div>
<div class="column">
<div class="portlet">
<div class="portlet-header">Shopping</div>
<div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
</div>
<div class="column">
<div class="portlet">
<div class="portlet-header">Links</div>
<div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
<div class="portlet">
<div class="portlet-header">Images</div>
<div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
</div>
我想将项目放在两个不同的列中,并且可以灵活地从一列拖放到另一列。将订单保存在 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>
查看 jQuery UI 可排序 Portlet:https://jqueryui.com/sortable/#portlets
这样您就可以将面板放入默认区域。
$(function() {
$(".column").sortable({
connectWith: ".column",
handle: ".portlet-header",
cancel: ".portlet-toggle",
placeholder: "portlet-placeholder ui-corner-all"
});
$(".portlet")
.addClass("ui-widget ui-widget-content ui-helper-clearfix ui-corner-all")
.find(".portlet-header")
.addClass("ui-widget-header ui-corner-all")
.prepend("<span class='ui-icon ui-icon-minusthick portlet-toggle'></span>");
$(".portlet-toggle").on("click", function() {
var icon = $(this);
icon.toggleClass("ui-icon-minusthick ui-icon-plusthick");
icon.closest(".portlet").find(".portlet-content").toggle();
});
});
body {
min-width: 520px;
}
.column {
width: 170px;
float: left;
padding-bottom: 100px;
}
.portlet {
margin: 0 1em 1em 0;
padding: 0.3em;
}
.portlet-header {
padding: 0.2em 0.3em;
margin-bottom: 0.5em;
position: relative;
}
.portlet-toggle {
position: absolute;
top: 50%;
right: 0;
margin-top: -8px;
}
.portlet-content {
padding: 0.4em;
}
.portlet-placeholder {
border: 1px dotted black;
margin: 0 1em 1em 0;
height: 50px;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="column">
<div class="portlet">
<div class="portlet-header">Feeds</div>
<div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
<div class="portlet">
<div class="portlet-header">News</div>
<div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
</div>
<div class="column">
<div class="portlet">
<div class="portlet-header">Shopping</div>
<div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
</div>
<div class="column">
<div class="portlet">
<div class="portlet-header">Links</div>
<div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
<div class="portlet">
<div class="portlet-header">Images</div>
<div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
</div>