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. no-image

    JavaScript

    多彩なコンテンツ表示やカスタマイズ性を有する「LC Lightbox」

    LC Lightboxは画像や動画など多彩なコンテンツ表示ができたり高…

  2. Zooming

    JavaScript

    クールな画像ズーム機能を実装できる「Zooming」

    Zoomingはクールでかっこいい画像ズーム機能を実装することができる…

  3. jQuery plugin Watermark
  4. no-image

    JavaScript

    固定されたフローティングメニューを実装できる「jquery-dice-menu」

    jquery-dice-menuは、固定されたシンプルなフローティング…

  5. Simple button checks

    JavaScript

    カスタマイズ可能なチェックボックスを実装できる「Simple button checks」

    Simple button checksはカスタマイズ可能なチェックボ…

  6. no-image

    JavaScript

    高さを揃えたレスポンシブな画像ギャラリー「jQuery Mosaic plugin」

    jQuery Mosaic pluginは高さを揃えたレスポンシブな画…

最近の記事

  1. EOS R6
  2. EOS R5
  3. Anker PowerExpand Direct 6-in-1 USB-C PDメディアハブ

アーカイブ

PAGE TOP