Web production note

　【更新日 : 】

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

Category：
jQuery
Tags：

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

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

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

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

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

//ブレークポイント設定
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);
	}
}

参考リンク