Draggable

指定した要素をマウスで移動できるようにします。

マウスによってドラッグ操作が出来る要素を生成します。 ドラッグだけでなく、ドラッグ&ドロップが必要な場合は jQuery UI Droppable も参照してください。

オプション 説明
addClasses

型:Boolean 初期値:true

falseが指定された場合、.ui-draggableのclassが追加されなくなります。 数百の要素に対して.draggable()を適用するようなパフォーマンスの最適化が望まれるようなケースで 必要になるかもしれません。

appendTo

型:jQuery or Element or Selector or String
初期値:"parent"

ドラッグ中にドラッグのヘルパー的な役割を果たす要素を付与する要素を指定します。

jQuery
ヘルパーを追加するjQueryオブジェクトを指定します。。
Element
ヘルパーを追加する要素を指定します。
Selector
ヘルパーを追加する要素をセレクターで指定します。
String
"parent"を指定すると、ドラッグ要素の兄弟要素としてヘルパーが追加されます。
axis

型:String 初期値:false

ドラッグ可能な方向をx軸、y軸のどちらかで強制することが出来ます。 "x"を指定すれば垂直方向のみ、"y"を指定すれば水平方向のみにしかドラッグできなくなります。

cancel

型:Selector
初期値:"input,textarea,button,select,option"

指定されたセレクター要素のドラッグをキャンセルします。

connectToSortable

型:Selector 初期値:false

指定されたSortableの要素に対してのドラッグ&ドロップを許可し、 ドロップされるとそのリストの一部となります。 並び替えが完璧に動作するためには、helperオプションに"clone"を指定する必要があり、 jQuery UI Sortableプラグインが必要です。

containment

型:Selector or Element or String or Array
初期値:false

Selector
ドラッグ可能領域をセレクターで指定します。複数要素が該当する場合は1つ目の要素が対象になります。 該当する要素がなければ、ドラッグ可能領域は設定されません。
Element
ここで指定された要素内がドラッグ可能領域になります。
String
"parent"、"document"、"window"のいずれかの値を指定することが出来ます。
Array
配列にて、[ x1, y1, x2, y2 ]の形式でドラッグ可能領域を指定します。

ドラッグ可能な範囲を要素または領域で指定します。

cursor

型:String 初期値:"auto"

ドラッグ操作中のカーソルをCSSの形式で指定します。

cursorAt

型:Object 初期値:false

マウスカーソルとドラッグヘルパーの相対位置を設定します。 この値はハッシュで1つ、または2つのキーと値の組み合わせで指定します。(top, left, right, bottom)

$( ".selector" ).draggable({ cursorAt: { left: 5 } });
delay

型:Number 初期値:0

マウスを押下してからドラッグ可能になるまでの時間をミリ秒単位で指定します。 このオプションは要素をクリックして意図せずドラッグされてしまうような問題を防ぎます。

disabled

型:Boolean 初期値:false

trueを指定すると、ドラッグを無効化します。

distance

型:Number 初期値:1

要素のドラッグが始まるまでに、マウスを動かさなければいけない距離をpx単位で指定します。 このオプションは要素をクリックして意図せずドラッグされてしまうような問題を防ぎます。

grid

型:Array 初期値:false

指定した各xとyのピクセルのグリッド毎にドラッグ要素が揃うようになります。 [x, y]の形式の配列で指定します。

handle

型:Selector or Element 初期値:false

指定した場合、MouseDownイベントが指定した要素(複数可)に発生しない限り、 ドラッグを開始しません。

helper

型:String or Function() 初期値:"original"

String
"clone"を指定すると、要素の複製が生成され、その複製がドラッグされます。
Function
ドラッグに使用されるDOM要素を返す関数を指定します。

ドラッグ表示を示すヘルパー要素を指定します。

iframeFix

型:Boolean or Selector 初期値:false

Boolean
trueが指定されると、ドラッグ中はページ内の各iframeに透明のレイヤーを被せます。
Selector
このセレクターで指定されたiframeに透明のレイヤーを被せます。

ドラッグ中にMouseMoveイベントによるキャプチャからiframeを保護します。 cursorAtオプションと組み合わせて使用する場合、またはマウスカーソルがヘルパー上に無い可能性があるような場合に有用です。

opacity

型:Number 初期値:false

ドラッグ中の要素の透明度を指定します。

refreshPositions

型:Boolean 初期値:false

trueを指定すると、全てのドロップ可能な位置をMouseMoveイベント毎に計算されます。
警告)これは非常に動的なページで有用ですが、パフォーマンスが劇的に低下します。

revert

型:Boolean or String 初期値:false

Boolean
trueが指定されると、要素は常にスタート位置に戻ります。
String
"invalid"が指定されると、ドロップ可能な要素にドロップされないとスタート位置に戻るようになります。
"valid"はこれの反対の動作を行います。

ドラッグ操作を止めた際に、元のスタート位置に要素を戻すか否かを指定します。

revertDuration

型:Number 初期値:500

revertのアニメーション時間をミリ秒単位で指定します。 revertオプションがfalseの場合は、このオプションは無視されます。

scope

型:String 初期値:"default"

ドロップ可能な要素のacceptオプションに加えて、 ドラッグとドロップ可能なアイテムのセットをグループ化するために使用されます。 ドロップ可能な要素と同じスコープ内にある、ドラッグ可能な要素のドロップを受け入れます。

scroll

型:Boolean 初期値:true

trueが指定されると、内包しているコンテナがドラッグに合わせて自動的にスクロールされるようになります。

scrollSensitivity

型:Number 初期値:20

スクロールが発生するまでの端からの距離をピクセル単位で指定します。 距離はポインタではなく、ドラッグ要素を基準にしています。 scrollオプションがfalseの場合は無視されます。

scrollSpeed

型:Number 初期値:20

scrollSensitivityによってスクロールされる際のスピードを指定します。 scrollオプションがfalseの場合は無視されます。

snap

型:Boolean or Selector 初期値:false

Boolean
trueが指定されると、他のドラッグ可能な全ての要素に吸着するようになります。
Selector
吸着させたい要素をセレクターで指定します。

ドラッグ要素が他の要素に吸着するか否かを指定します。

snapMode

型:String 初期値:"both"

どの部分の端に対して、ドラッグ要素が吸着するかを決定します。 snapオプションがfalseの場合は無視されます。 指定可能な値は、"inner"(内部), "outer"(外部), "both"(両方)です。

snapTolerance

型:Number 初期値:20

吸着が発生する距離をピクセル単位で指定します。 snapオプションがfalseの場合は無視されます。

stack

型:Selector 初期値:false

セレクターにマッチした要素を、現在ドラッグされている要素よりも前に表示されるようにz-indexを制御します。

zIndex

型:Number 初期値:false

ドラッグ時のz-indexの値を指定します。

メソッド説明
destroy()

ドラッグの機能を完全に削除します。

$( ".selector" ).spinner( "destroy" );
disable()

ドラッグを無効化します。

enable()

ドラッグを有効にします。

option( optionName )

戻り値:Object

optionNameに指定したオプションの現在の値を取得します。

optionName
型:String
取得したいオプションの名前を指定します。
option()

戻り値:PlainObject

オプションの各キーと値がペアとなったオブジェクトを返します。

option( optionName, value )

引数のoptionNameのオプションに値を設定します。

optionName
型:String
設定したいオプションの名前を指定します。
value
型:Object
設定したい値を指定します。
option( options )

オプションに設定したい各キーと値がペアとなったオブジェクトを指定します。

option
型:Object
設定したいオプションのキーと名前のペアを指定します。
widget()

戻り値:Object

ドラッグを含めたjQueryオブジェクトを返します。

イベント 説明
create( event, ui )

型:dragcreate

ドラッグ要素が生成された際にトリガされます。

$( ".selector" ).draggable({
    create: function( event, ui ) {}
});
$( ".selector" ).on( "dragcreate", function( event, ui ) {} );
drag( event, ui )

型:drag

要素をドラッグして動かしている間、トリガされ続けます。

ui.helper
型:jQuery
ドラッグされている要素(ヘルパー)をjQueryオブジェクトで取得します。
ui.position
型:Object
その時点のドラッグ要素のpositionを{top, left}のオブジェクトの形式で取得します。
ui.offset
型:Object
その時点のドラッグ要素のoffsetを{top, left}のオブジェクトの形式で取得します。
start( event, ui )

型:dragstart

ドラッグがスタートする際に、トリガされます。

ui.helper
型:jQuery
ドラッグされている要素(ヘルパー)をjQueryオブジェクトで取得します。
ui.position
型:Object
その時点のドラッグ要素のpositionを{top, left}のオブジェクトの形式で取得します。
ui.offset
型:Object
その時点のドラッグ要素のoffsetを{top, left}のオブジェクトの形式で取得します。
stop( event, ui )

型:dragstop

ドラッグが終了する際に、トリガされます。

ui.helper
型:jQuery
ドラッグされている要素(ヘルパー)をjQueryオブジェクトで取得します。
ui.position
型:Object
その時点のドラッグ要素のpositionを{top, left}のオブジェクトの形式で取得します。
ui.offset
型:Object
その時点のドラッグ要素のoffsetを{top, left}のオブジェクトの形式で取得します。

 Back to top

© 2010 - 2017 STUDIO KINGDOM