jQuery: Fixed Length, Connected, Sortable Lists

I have a single list that is broken into three columns as follows:
Column1 Column2 Column3
1       4       7
2       5       8
3       6       9
The list is continuous from 1 to 9 and each column has a fixed number of rows (3). I want to allow the user to reorder the list while maintaining my fixed length columns (3 rows). Making the list sortable via jQuery was fairly easy. HTML
< ul class="sortable" id="column1">
	< li class="section">1< /li>
	< li class="section">2< /li>
	< li class="section">3< /li>
< /ul>
< ul class="sortable" id="column2">
	< li class="section">4< /li>
	< li class="section">5< /li>
	< li class="section">6< /li>
< /ul>
< ul class="sortable" id="column3">
	< li class="section">7< /li>
	< li class="section">8< /li>
	< li class="section">9< /li>
< /ul>
Javascript
$('#column1').sortable({
	connectWith: ".sortable",
	items : ".section"
	});
$('#column2').sortable({
	connectWith: ".sortable",
	items : ".section"
	});
$('#column3').sortable({
	connectWith: ".sortable",
	items : ".section"
	});
This allows me to drag and drop across lists, but I'm not sure how to maintain column length. Using this method, each list grows and shrinks as items are moved. Any suggestions on a good method to accomplish this? **EDITED WITH FULL SOLUTION** Thanks to both of the responses I got the full solution. In my question I neglected to mention I had a header in each column. HTML
< ul class="sortable" id="column1">
	< li class="header">Header< /li>
	< li class="section">1< /li>
	< li class="section">2< /li>
	< li class="section">3< /li>
< /ul>
< ul class="sortable" id="column2">
	< li class="header">Header< /li>
	< li class="section">4< /li>
	< li class="section">5< /li>
	< li class="section">6< /li>
< /ul>
< ul class="sortable" id="column3">
	< li class="header">Header< /li>
	< li class="section">7< /li>
	< li class="section">8< /li>
	< li class="section">9< /li>
< /ul>
Javascript
var colLength = 4;
$('#column1, #column2, #column3').sortable({
	connectWith: ".draftboard",
	items : ".section",
	update : balanceColumns
});
balanceColumns: function(event, ui){
	function balanceColumn1(){
		var col1 = $('#column1 li');
		var col2 = $('#column2 li');
		var col3 = $('#column3 li');
		if (col1.length > colLength){
			col1.last().insertAfter( col2[0] );
		}
		else if(col1.length < colLength){
			col2.parent().children(':nth-child(2)').appendTo(col1.parent());
		}
	}
	function balanceColumn2(){
		var col1 = $('#column1 li');
		var col2 = $('#column2 li');
		var col3 = $('#column3 li');
		if (col2.length > colLength){	
			if (col1.length < colLength) {
				col2.parent().children(':nth-child(2)').appendTo(col1.parent());
			} else {
				col2.last().insertAfter( col3[0] );
			}
		}
		else if(col2.length < colLength){
			col3.parent().children(':nth-child(2)').appendTo(col2.parent());
		}
	}
	function balanceColumn3(){
		var col1 = $('#column1 li');
		var col2 = $('#column2 li');
		var col3 = $('#column3 li');
		if (col3.length > colLength) {
			col3.parent().children(':nth-child(2)').appendTo(col2.parent());
			balanceColumn2();
		}
	}
	balanceColumn1();
	balanceColumn2();
	balanceColumn3();
}

以上就是jQuery: Fixed Length, Connected, Sortable Lists的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » JavaScript 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏