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

関連記事

  1. Filterable Product Grid
  2. css3-mediaqueries-js

    JavaScript

    Media QueriesをIE8以下でも使えるようにするための「css3-mediaqueries…

    前回、Media Queriesの@mediaを使用したCSSをまとめ…

  3. no-image

    JavaScript

    サラッとスライスで切り替わるスライダー実装「Slice Slider」

    Slice Sliderはサラッとスライスでシンプルに切り替わるスライ…

  4. Kontext

    JavaScript

    iOSの画面切り替えのようなスライドができるJavaScript「Kontext」

    KontextというJavaScriptを使えばiOSの画面切り替えの…

  5. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryで現在のウィンドウサイズの取得と判定をして処理を変えるやり方

    jQueryで現在のウィンドウサイズの取得と判定をして処理を変えるやり…

  6. jumboShare

    JavaScript

    SNSシェアボタンとジャンボサイズのカウンターを設置できる「jumboShare」

    jumboShareはSNSのシェアボタンとジャンボサイズのカウンター…

最近の記事

  1. Soundcore Ace A1
  2. cheero USB-C PD Charger 60W
  3. DY-S01
  4. OWL-QI10W04

アーカイブ

PAGE TOP