2016.01.14

【jQuery】指定した要素を自由に移動させる

Category: JavaScript / jQuery

Tags

//指定要素内の最前に移動
$('移動させる要素').prependTo('移動先');

//指定要素内の最後に移動
$('移動させる要素').appendTo('移動先');

指定した要素を目的の場所に移動させる関数のサンプルです。
レスポンシブコーディングの時など、タグの位置を変えなくてはならない時に重宝します。

ウィンドウ幅によって要素を移動させる

//ブレークポイント設定
var spW = 767;

//コンテツ移動関数呼び出し
moveContents('#移動させる要素','#PCの移動先','#SPの移動先');
$(window).on('load resize orientationchange', function () {
	moveContents('#移動させる要素','#PCの移動先','#SPの移動先');
});

//コンテツ移動関数
//elm:移動させる要素 movePc:PCの移動先 moveSp:SPの移動先
function moveContents(elm,movePc,moveSp) {
	//ウィンドウの横幅を取得
	var winW = window.innerWidth ? window.innerWidth: $(window).width();
	//PCの移動先
	if( winW > spW ) {
		//指定要素内の最前に移動
		$(elm).prependTo(movePc);
	//SPの移動先
	} else {
		//指定要素内の最後に移動
		$(elm).appendTo(moveSp);
	}
}

PCとSPで要素の位置が変わる場合、上記のようにすれば実現できます。
コンテツ移動関数内の「appendTo」「prependTo」は必要に応じて変更してください。

参考リンク

Category : JavaScript / jQuery