flexboxでグリッドの順番を入れ替える

まずはDEMOをみてください

ドラッグアンドドロップで、グリッドの順番を入れ替えることが出来ます。
ChromeとSafariで検証済みです。

1
2
3
4
5
6
7
8

このように、flexboxはグリッドの順番を入れ替えることもできます。
flexboxの小要素にorderというプロパティを付与し、番号を設定するだけです。

JavaScript

	var $current;
	var index = 0;
	$('[data-type=sortable]').attr("draggable",true).each(function(){
		$(this).css("order",index);
		index++;
	}).on('dragover',function(e){
		e.preventDefault();
		return false;
	}).on('drag',function(e){
		$current = $(this);
	}).on('drop',function(e){
		$target = $(this);
		order_o = $current.css('order'),
		order_t = $target.css('order');
		$current.css('order',order_t).animate({opacity:0},200).animate({opacity:1},200);
		$target.css('order',order_o).animate({opacity:0},200).animate({opacity:1},200);
	});

JSのソース的にはこんな感じで、ドラッグされる要素と、ドロップされる要素のorderの値をお互いに交換することで順番を変更しています

flexboxのブラウザの対応状況


Can I use

flexboxは今のモダンブラウザではほとんどサポートされているようですね

参考にしたサイト



堀 悟大

アップルップル フロントエンドエンジニア。2014年高知大学理学部卒業。学生時代にHTML5のCanvas要素を使ってゲームを作っていたことでWeb全般に興味をもつ。アップルップル入社後はa-blog cmsを便利に使うための機能の実装や、HTML5の技術を使ったデジタルサイネージの実装を行う。趣味は英語。読むことも話すことも好き。

Home
Next entry →