swingdrag

JavaScript

jQuery UIのドラッグ機能にスイング効果を加えることができる「swingdrag」

swingdragは、jQuery UIのドラッグ機能にスイング効果を加えることができるjQueryプラグインです。特定の要素をドラッグした時に、ただ移動するだけではなく左右にスイングしながら動かすことができます。

最大回転角度の設定などもできる

デモ

「Drag me!」と書かれた要素をドラッグすると、スイングしながら要素を自由に移動することができます。ただ移動させるだけでは何だか少し味気ないと感じている人には、ピッタリの機能といえるのではないでしょうか?

使い方もシンプルなので、サクッと実装できるはず。また、オプションもいくつか用意されているのでちょっとしたカスタマイズをしたい人にもうれしい仕様になっています。

主なオプションは、rotationAngleDeg、showShadow、pickUpScaleFactorです。各オプション項目のデフォルト値は、rotationAngleDegが20、showShadowがtrue、pickUpScaleFactorが1.1になります。

ちなみに、最大回転角度を設定するオプションはrotationAngleDegです。スイングさせる幅を大きくしたり小さくしたりしたい場合は、ここの値を調節すればOKです。

というわけで、jQuery UIによるドラッグ機能にスイングさせるエフェクトを追加するjQueryプラグイン「swingdrag」のご紹介でした。

swingdrag

no-image1日のイベントスケジュールを作成できる「Jquery Layoutday plugin」前のページ

軽量でモバイルにも最適なポップアップウィンドウを実装できる「Mobilepopup」次のページMobilepopup

関連記事

  1. JavaScript

    画像やHTML要素に簡単にドロップシャドウをつけられるjQueryプラグイン「pShadow」

    個人的にすごく便利で使う機会がありそなjQueryプラグインの紹介です…

  2. 2013年下半期jQueryプラグインまとめ

    JavaScript

    2013年下半期に紹介したjQueryプラグイン68選まとめ

    今年も残すところあとわずかとなりました。今年もたくさんのjQueryプ…

  3. no-image

    JavaScript

    スクロールした時に最適な位置に合わせてくれる「jQuery.panelSnap」

    jQuery.panelSnapは、コンテンツごとに縦に並べられたパネ…

  4. no-image

    JavaScript

    シンプルでカスタマイズも簡単なパララックスエフェクト実装「parlx.js」

    parlx.jsはシンプルでカスタマイズも簡単なパララックスエフェクト…

  5. AJAX Live Search
  6. Radial SVG Slider

    JavaScript

    放射状に切り替わるスライダーを実装できる「Radial SVG Slider」

    Radial SVG Sliderは、放射状に広がりながら切り替わるス…

最近の記事

  1. そそそ 明太クリームそうめん
  2. すしざんまい
  3. 蒼龍唐玉堂 特製牛バラ担々麺
  4. サーモンアボカドサラダラップとドリップ
  5. 猿田彦フレンチ

アーカイブ

PAGE TOP