2016.01.14

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

Category: JavaScript / jQuery

Tags

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

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

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

//コンテツ移動関数呼び出し
moveContents('#移動させる要素','#PCの移動先','#SPの移動先');
$(window).on('load resize orientationchange', function () {
moveContents('#移動させる要素','#PCの移動先','#SPの移動先');
});
//ブレークポイント設定
var spW = 767;
//コンテツ移動関数
//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