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. scrollama.js

    JavaScript

    スクロールイベントを実装できるモダンで軽量なJSライブラリ「scrollama.js」

    scrollama.jsは、スクロールイベントを実装することができるモ…

  2. jQuery Lighter

    JavaScript

    優雅なフェードで拡大縮小されるLightbox系ギャラリー・jQuery Lighter

    jQuery Lighterは美しいフェードで画像を拡大縮小させること…

  3. jQuery Smart Placeholder
  4. FocusPoint

    JavaScript

    画像の指定した部分を中心にレスポンシブ化できるjQueryプラグイン「FocusPoint」

    FocusPointというjQueryプラグインを使えば、画像の指定し…

  5. Animate Plus

    JavaScript

    CSS、SVGを使った多彩なアニメーションを実装できる「Animate Plus」

    Animate PlusはCSS、SVGを使った多彩なアニメーションを…

  6. multi.js

    JavaScript

    検索機能がついたセレクトボックスを実装できる「multi.js」

    multi.jsは検索機能がついた使いやすいユーザーフレンドリーなセレ…

最近の記事

  1. DCG-CA21
  2. Apple WatchでのMacロック解除を無効
  3. オータムスイートポテトフラペチーノ
  4. 紅葉
  5. ナノケア EH-NA0E

アーカイブ

PAGE TOP