门户组件（Portlet）
启用门户组件（样式化的div）作为可排序的，并使用connectWith选项来允许在列之间进行排序。
<！doctype html>
<html lang =“ zh_CN”><html lang = “ en” >
<头><头>
<meta charset =“ utf-8”><meta charset = “ utf-8” >
<title> jQuery UI排序（Sortable）-门户组件（Portlet）</ title><title> jQuery UI排序（Sortable）-门户组件（Portlet）</ title>
<link rel =“ stylesheet” href =“ // code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css”><link rel = “ stylesheet” href = “ //code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css” >
<script src =“ // code.jquery.com/jquery-1.9.1.js”> </ script><script src = “ //code.jquery.com/jquery-1.9.1.js” > </ script>
<script src =“ // code.jquery.com/ui/1.10.4/jquery-ui.js”> </ script><script src = “ //code.jquery.com/ui/1.10.4/jquery-ui.js” > </ script>
<link rel =“ stylesheet” href =“ http://jqueryui.com/resources/demos/style.css”><link rel = “ stylesheet” href = “ http://jqueryui.com/resources/demos/style.css” >
<样式><样式>
身体 {{
最小宽度：520px；-宽度：520px ;
}}
.column {。列{
宽度：170像素；：170px ;
向左飘浮;浮动：左;
padding-bottom：100px;-底：100px ;
}}
.portlet {。Portlet {
保证金：0 0em 1em 0;：0 1em 1em 0 ;
填充：0.3em;：0.3em ;
}}
.portlet-header {。门户-头{
填充：0.2em 0.3em;：0.2em 0.3em ;
底边距：0.5em;-底部：0.5em ;
职位：相对：亲戚;
}}
.portlet-toggle {。门户-切换{
位置：绝对；：绝对;
最高：50％；：50 ％;
正确：0；：0 ;
上边距：-8px;-顶部：- 8像素;
}}
.portlet-content {。门户-内容{
填充：0.4em;：0.4em ;
}}
.portlet-placeholder {。门户-占位符{
边框：1px黑色点缀；：1px黑色点缀;
保证金：0 0em 1em 0;：0 1em 1em 0 ;
高度：50px；：50px ;
}}
</ style></ style>
<脚本><脚本>
$（function（）{（函数（）{
$（“ .column”）.sortable（{（“ .column” ）。可排序（{
connectWith：“。column”，：“ .column” ，
处理：“。portlet-header”，：“ .portlet-header” ，
取消：“。portlet-toggle”，：“ .portlet-toggle” ，
占位符：“ portlet-placeholder ui-corner-all”：“ portlet占位符ui-corner-all”
}）;}）;
$（“ .portlet”）（“ .portlet” ）
.addClass（“ ui-widget ui-widget-content ui-helper-clearfix ui-corner-all”）。addClass （“ ui-widget ui-widget-content ui-helper-clearfix ui-corner-all” ）
.find（“ .portlet-header”）。查找（“ .portlet-header” ）
.addClass（“ ui-widget-header ui-corner-all”）。addClass （“ ui-widget-header ui-corner-all” ）
.prepend（“ <span class ='ui-icon ui-icon-minusthick portlet-toggle'> </ span>”）;。前置（“ <span class ='ui-icon ui-icon-minusthick portlet-toggle'> </ span>” ）;
$（“ .portlet-toggle”）.click（function（）{（“ .portlet-toggle” ）。点击（function （）{
var icon = $（this）;var icon = $ （this ）;
icon.toggleClass（“ ui-icon-minusthick ui-icon-plusthick”）;。toggleClass （“ ui-icon-minusthick ui-icon-plusthick” ）;
icon.closest（“ .portlet”）.find（“ .portlet-content”）.toggle（）;。最接近的（“ .portlet” ）。查找（“ .portlet-content” ）。切换（）;
}）;}）;
}）;}）;
</ script></ script>
</ head></ head>
<身体><身体>
<div class =“ column”><div class = “列” >
<div class =“ portlet”><div class = “ portlet” >
<div class =“ portlet-header”>订阅</ div><div class = “ portlet-header” >订阅</ div>
<div class =“ portlet-content”> Lorem ipsum dolor坐下来，私密的教育精英</ div><div class = “ portlet-content” > Lorem ipsum dolor sit amet，专业秘书adipiscing精英</ div>
</ div></ div>
<div class =“ portlet”><div class = “ portlet” >
<div class =“ portlet-header”>新闻</ div><div class = “ portlet-header” >新闻</ div>
<div class =“ portlet-content”> Lorem ipsum dolor坐下来，私密的教育精英</ div><div class = “ portlet-content” > Lorem ipsum dolor sit amet，专业秘书adipiscing精英</ div>
</ div></ div>
</ div></ div>
<div class =“ column”><div class = “列” >
<div class =“ portlet”><div class = “ portlet” >
<div class =“ portlet-header”>购物</ div><div class = “ portlet-header” >购物</ div>
<div class =“ portlet-content”> Lorem ipsum dolor坐下来，私密的教育精英</ div><div class = “ portlet-content” > Lorem ipsum dolor sit amet，专业秘书adipiscing精英</ div>
</ div></ div>
</ div></ div>
<div class =“ column”><div class = “列” >
<div class =“ portlet”><div class = “ portlet” >
<div class =“ portlet-header”>链接</ div><div class = “ portlet-header” >链接</ div>
<div class =“ portlet-content”> Lorem ipsum dolor坐下来，私密的教育精英</ div><div class = “ portlet-content” > Lorem ipsum dolor sit amet，专业秘书adipiscing精英</ div>
</ div></ div>
<div class =“ portlet”><div class = “ portlet” >
<div class =“ portlet-header”>图像</ div><div class = “ portlet-header” >图像</ div>
<div class =“ portlet-content”> Lorem ipsum dolor坐下来，私密的教育精英</ div><div class = “ portlet-content” > Lorem ipsum dolor sit amet，专业秘书adipiscing精英</ div>
</ div></ div>
</ div>
</ body></ body>
</ html>
如果您觉得本文的内容对您的学习有所帮助：
关键字：
门户组件