*

jQuery draggable,resizable 要素のサイズがずれる

公開日: : 最終更新日:2014/04/05 jQuery, 開発

uiプロパティ以外で要素のサイズ取得を試みる

draggableとresizableを使用し要素のサイズ変更や、移動後のサイズを取得するには
uiプロパティからアクセスするのが一般的かも知れませんが、cssでmarginやpaddingを指定した場合は
cssのプロパティを抜いた値しか取得できません。

何故かは分かりませんが、きっと親切設計なんだと思います。。。

動作環境、jQueryバージョン

jquery-1.9.1
Firefox 27.0.1

要素の横幅が100pxになるようにし、styleを設定した場合

・script
100px伸ばして計200pxになるようにした場合

[対象ノード].resizable({
 	// 一度に移動できる幅を固定
 	grid: [ 100, 100 ], 
 	stop: function(event, ui) {
	// ui.size['width'] 188pxが返されます。
	// $(this)[0]['clientWidth'] 188pxが返されます。
	}
});

今回は200pxの値が欲しいので、思った通りの結果になりません。
不足分の12pxを足せばそれで良いのですが、cssのプロパティ値に変更があった場合を考慮しちょっとコードを追加

$('.mn').resizable({
 	stop: function(event, ui) {
		var width = getNodeWidth($(this));
		//200が返ってきます
	}
});

// pxを外しnumberで返却 
function removePx(string) {
	var s = string.replace("px", "");
	return Number(s);
};

// ノードの横幅を計算する
function getNodeWidth(node) {
 	//jqury1.9以降では一括で各値を取得できるようになりました。
 	var cscProperty = node.css(['width','margin-left','margin-right','padding-left', 'padding-right']);
	var width = 0;
	for (var i in cscProperty) width += removePx(cscProperty[i]);
	return width;
}

今回はwidthだけですが、heightも同じように取れると思います?
もっと簡単な方法が有れば良いのですが、取り敢えずぱっと思いついた処理でした。

関連記事

jquery-logo_png

jQuery Googleカレンダー風スケジュール表 タイムテーブル

jQueryでスケジュール表もしくはタイムテーブルっぽいもの 仕事でスケジュール管理のシステム開発

記事を読む

php-logo

PHPで指定日の祝日を取得する方法 GoogleAPI利用

google APIを利用して指定日が祝日かどうか取得する 技術的な内容を書く場合は載せてるコード

記事を読む

c2

C言語 バッファオーバーランまで ポインタ考察編

趣旨 ただC言語を勉強してもモチベーションがあがり辛いので、 取り合えずバッファオーバーランを目

記事を読む

droid

Androidで課金アプリ作製 定期購読サンプルコード編

Androidで課金アプリ作製 定期購読編 In-app Billing v3を使用したアプリ開発

記事を読む

cs06d2.PNG

Androidで課金アプリ作製 サンプルコード(BILLING V3) 起動編

Androidで課金アプリ作製 サンプルコード起動編 課金アプリの制作の機会が来てしまいました。

記事を読む

PHP 5.4.17

Macで ローカルサーバー構築 PHP設定編

Macで ローカルサーバー環境を構築するまで PHP設定編 ネットでの情報は必要最低限しか載ってな

記事を読む

jquery-logo_png

jQuery 要素の相対位置

jQueryを使って要素の相対位置を調べる Google先生に「jquery offsetLeft

記事を読む

PHP-icon

PHPでIE11ユーザーエージェント判定

IE11のユーザーエージェント判定 自作のユーザーエージェント判定クラスでIEの判定が出来てなかっ

記事を読む

apache -h

Macで ローカルサーバー構築 Apache起動編

Macで ローカルサーバー環境を構築するまで Apache起動編 ネットでの情報は必要最低限しか載

記事を読む

Mac ネットワークユーティリティ

Macで ローカルサーバー構築 ローカルネットワーク参加編

Macで ローカルサーバー環境を構築するまで Apache設定編 ネットでの情報は必要最低限しか載

記事を読む

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

post date*

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

jquery-logo_png
jQuery 水平スクロール&cssでカスタム可能なスクロールバーなプラグイン

水平スクロール&cssでカスタム可能なスクロールバーなプラグイン j

c
C言語 バッファオーバーランまで 関数の引数ポインタ

関数引数としてのポインタ 今回は関数引数としてのポインタに関して。

c2
C言語 バッファオーバーランまで ポインタ考察編

趣旨 ただC言語を勉強してもモチベーションがあがり辛いので、 取り

droid
Google Cloud Messaging プロジェクトナンバー API Key取得編 2014/07最新版

Google Cloud Messaging プロジェクトナンバー A

jquery-logo_png
jQuery removeClass 特定のクラスを全て削除

特定のクラスを全て削除 フォームを作成した時に、入力項目に不備があっ

→もっと見る

PAGE TOP ↑