最終效果
代碼:
html:
<body>
<section id="layoutcontent" class="ui grid">
<div class="ui ten wide column">
<div class="ui-header">
<h3 class="modal-title">項目組織架構模版</h3>
</div>
<br /><br /><br />
</div>
<div id="layoutSep" class="ui layout_sep">
</div>
<div class="ui six wide column">
<div class="ui-header">
<h3 data-bind="text:titleMsg" class="modal-title">公司組織架構</h3>
</div>
<div class="ui list"></div>
</div>
</section>
</body>
js
$(document).ready(function() {
//拖拽改變列寬
layoutSep('layoutSep');
});
//需要配合resize使用....否則拖拽了后, 會把百分比寬度改成000px寬度.如果用戶改變窗口大小...會把布局擠破...
$(window).resize(function() {
var ns = $('.ui .ten');
var ps = $('.ui .six');
if($($("section")[0]).width() < 550) {
ns.css('width', '60.5%');
ps.css('width', '32.5%');
} else {
ns.css('width', '62.5%');
ps.css('width', '34.5%');
}
});
function layoutSep(id) {
var x = 0;
var s = $("#" + id);
var ns = s.next();
var ps = s.prev();
s.mousedown(function(ev) {
s.data('is_dragging', true);
x = ev.pageX;
document.onmousemove = function(e) {
if(s.data('is_dragging')) {
var movex = e.pageX - x;
x = e.pageX;
ps.width(ps.width() + movex);
ns.width(ns.width() - movex);
return false;
}
}
document.onmouseup = function() {
s.data('is_dragging', false);
document.onmouseup = document.onmousemove = null;
}
return false;
})
}
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。
