jQuery.dragWidget

更新 2013-04-15 ver 0.0.4
jQuery UI は色々機能も豊富でスゴイプラグインが多いけれど、タブレットやスマホで使うにはちょっと重い時がありますよね・・
私はXpedia SO-01Eを使ってますが、これだと動きがかなりカクカクしますし、ajaxで非同期通信やイベントを多く扱うアプリなんかを作る時にも、シングルスレッドなのでかなり動きがカクカクしてしまう事がよくあります。

なので、jQuery UI の Draggable風、iPhone Android PC対応 CSS Tranformを使った ちょっと軽いプラグイン?の制作に挑戦してみます!

使用例
$(selector).dragwidget();

$(selector).dragwidget({
	helper: "clone",
	opacity: 50,
	cursor: "move",
	handle:".handle"
});
$(selector).bind('longtap', function() {
	longtapの動作
}).bind('doubletap', function() {
	doubletapの動作
}).bind('dragstart', function() {
	dragstartの動作
}).bind('dragend', function() {
	dragendの動作
});
					

デモ ダブルタップ(ダブルクリック)、長押しで状態が変化し、ダブルタップで元の位置に戻ります

Event :
helper: "clone"
opacity: 50
cursor: "move"
Event :
cursor: "move"
Event :
opacity: 50
cursor: "move"
handle: ".handle"
ここをドラッグ
Event :
helper: "clone"
cursor: "move"
cancel:".cancel"
revert: true
ここはダメ!
タッチ(ドラッグ)したまま早く、上下左右、グルグル振り回して試してください
スマートフォン用ページ

スマートフォン用ページ

jquery-ui-draggable 場合 (jQuery UI 1.10.3)

$(selector).addTouch();
$(selector).draggable();
					
draggable
やはりjQuery UIはスゴイですね! モジュールが大きくなっても効率がかなり良いようです。
  • パソコンの場合は画面の外に動かしたり、全体の処理が重い場合には描画が追いつかず、カーソルと対象要素が離れて表示されてしまう事があるみたいです。
  • iPad、iPhoneの場合はdragWidgetの方が少し早く感じられますが、大きな差異は感じられません。
  • Android系の場合は動きがカクカクになる現象が、現時点で出回っているスマートフォンでかなりの確率で(私の身の回りの機種ですが・・)発生します。

jQuery.dragWidget のダウンロード

ver 0.0.3 β (2013/03/29)
とりあえずの安定版
ver 0.0.4 (2013/04/15)
ディフォルトの変更、disableの不具合修正、合わせてiPhoneのalertに対する干渉(?)に対応

jquery.dragWidgetの使い方

Options

プロパティ 省略値 説明
useCssTansform true/false true trueの時は自動設定します
スクロールをCSS Tansformを使って行う場合はtrue
cursor CSSのcursorプロパティの値 なし ドラッグ中のカーソルを指定します
cancel selector なし 指定した要素は対象外にします
handle selector なし ドラッグ対象とする要素を指定します
helper clone/original original ドラッグ中の表示方法を指定します。
"clone"を指定すると、要素を複製して表示するghostingエフェクトが適用されます。
"original"を指定すると、ドラッグ要素をマウスカーソルに合わせて動かします。
opacity 数字 0~100 100(%) 移動時の透過率(%)を指定
zIndex 数字 自動計算 重なりの順序(z-index)を指定
distance ピクセル値 3 指定されたpixelを超えたところまで引きずらないと、ドラッグが開始されないようにします。
タッチディバイスはタッチした時に、微妙なズレを感知しtouchmoveイベントが発生する場合があります。
revert true/false なし trueを指定すると、ドラッグ終了時に、ドラッグ開始位置に要素が戻ります。
longtap true/false false ロングタップイベントを発生するかどうかを指定
forceTranslate3d true/false true Translate3d使用するかどうかを指定
draggable true/false true ドラッグの要否を指定します。
false にするとカスタムイベントのみ発生させます。(-> Events)
duration ミリ秒 300ms ホームポジションに戻るアニメーション一回分の時間の長さを指定
monitoring ミリ秒 300ms ロングタップ、ダブルタップ判定のタイムアウト時間を指定

Events

singletap PCの場合はクリック、タッチディバイスの場合はシングルタップの時に発生するイベント
doubletap PCの場合はダブルクリック、タッチディバイスの場合はダブルタップの時に発生するイベント
longtap 長押し時に発生するイベント
dragstart ドラッグがスタートした時に発生するイベント
dragend ドラッグが終了した時に発生するイベント

Methods

enable 機能を有効化します。
disable 機能を無効化します。
dockin 最初の位置に戻ります。
CallBackが指定可能です。
destroy 自動生成したオブジェクトを破棄し、対象エレメントを元の状態に戻します。
option 書式 $(selector).dragwidget('option', key, value);
オプションを設定もしくは取得します。valueが省略されると値を取得します。

$(selector).dragwidget('option', key);
$(selector).dragwidget('option', { key1: value1, key2: value2 .... } );

マークアップ

※なし

ワンポイント

jQuery.dragWidgetのページ

レスポンスを早くするアイデアがありましたら、教えてください m(_ _)m
http://pochi2013.blog.fc2.com/