jQueryのUIの例 - ドラッグ（ドラッグ可能な）
マウスが要素を移動することを可能にします。
ドラッグ可能な相互作用の詳細については、APIドキュメントを参照してウィジェット（ドラッグ可能なウィジェット）をドラッグ＆ドロップすることができます 。
デフォルトの機能
任意のDOM要素にドラッグ可能な機能を有効にします。 ドラッグ可能なオブジェクトを移動するには、ビューポート内でマウスをクリックしてドラッグします。
<！DOCTYPE HTML>
<HTML LANG = "EN">
<ヘッド>
<メタ文字セット= "UTF-8">
<タイトル>のjQuery UIのドラッグ（ドラッグ可能） - デフォルトの機能</タイトル>
<リンクのrel = "スタイルシート"のhref = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<SCRIPT SRC = "// code.jquery.com/jquery-1.9.1.js"> </スクリプト>
<SCRIPT SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </スクリプト>
<リンクのrel = "スタイルシート"のhref = "http://jqueryui.com/resources/demos/style.css">
<スタイル>
#draggable {幅：150ピクセル、高さ150ピクセル;パディング：0.5em;}
</スタイル>
<スクリプト>
$（関数（）{
$（ "#draggable」）.draggable（）;
}）;
</スクリプト>
</ HEAD>
<ボディ>
<DIVのID = "ドラッグ可能な"クラス= "UIウィジェットコンテンツ」>
<P>私をドラッグしてください！ </ P>
</ DIV>
</ BODY>
</ HTML>
自動スクロール
ドラッグ可能なビューポートの外に移動し、文書による自動スクロール。 設定scrollトリガーをスクロールするときに自動スクロールを有効にするにはtrueにオプション、微調整、スクロール速度をscrollSensitivityとscrollSpeedオプションの設定。
<！DOCTYPE HTML>
<HTML LANG = "EN">
<ヘッド>
<メタ文字セット= "UTF-8">
<タイトル>のjQuery UIのドラッグ（ドラッグ可能） - 自動スクロール</タイトル>
<リンクのrel = "スタイルシート"のhref = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<SCRIPT SRC = "// code.jquery.com/jquery-1.9.1.js"> </スクリプト>
<SCRIPT SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </スクリプト>
<リンクのrel = "スタイルシート"のhref = "http://jqueryui.com/resources/demos/style.css">
<スタイル>
#draggable、＃のdraggable2、＃のdraggable3 {幅：100ピクセル、高さ100ピクセル;パディング：0.5em;フロート：左;マージン：0 10pxの10pxの0;}
</スタイル>
<スクリプト>
$（関数（）{
$（ "#draggable」）.draggable（{スクロール：真}）;
$（ "＃Draggable2」）.draggable（{スクロール：真、scrollSensitivity：100}）;
$（ "＃Draggable3」）.draggable（{スクロール：真、scrollSpeed：100}）;
}）;
</スクリプト>
</ HEAD>
<ボディ>
<DIVのID = "ドラッグ可能な"クラス= "UIウィジェットコンテンツ」>
<P>スクロールがtrueに設定され、デフォルトの設定</ P>
</ DIV>
<DIVのID = "draggable2"クラス= "UIウィジェットコンテンツ」>
<P> 100 scrollSensitivityます。</ p>
</ DIV>
<DIVのID = "draggable3"クラス= "UIウィジェットコンテンツ」>
<P> </ P> 100にscrollSpeed
</ DIV>
<DIVのスタイル= "高さ：5000px;幅：1pxの;"> </ div>の
</ BODY>
</ HTML>
拘束された動き
各ドラッグ可能の動きを制約するために、境界によって定義されたドラッグ可能なエリア。 設定axis 、x軸またはy軸のドラッグパスを制限するためのオプションを、またはcontainmentなど、親DOM要素またはjQueryのセレクタを指定するオプション'ドキュメント'。
<！DOCTYPE HTML>
<HTML LANG = "EN">
<ヘッド>
<メタ文字セット= "UTF-8">
<タイトル>のjQuery UIのドラッグ（ドラッグ可能） - 制約モーション</タイトル>
<リンクのrel = "スタイルシート"のhref = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<SCRIPT SRC = "// code.jquery.com/jquery-1.9.1.js"> </スクリプト>
<SCRIPT SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </スクリプト>
<リンクのrel = "スタイルシート"のhref = "http://jqueryui.com/resources/demos/style.css">
<スタイル>
.draggable {幅：90PX;高さ：90PX;パディング：0.5em;フロート：左;マージン：0 10pxの10pxの0;}
#draggable、＃のdraggable2 {マージン底：20ピクセル;}
#draggable {カーソル：N-リサイズ;}
＃Draggable2 {カーソル：電子リサイズ;}
＃封じ込めラッパー{幅：95％;高さ：150ピクセル;ボーダー：2PX固体#CCC;パディング：10pxの;}
H3 {クリア：左;}
</スタイル>
<スクリプト>
$（関数（）{
$（ "#draggable」）.draggable（{軸：" Y "}）;
$（ "＃Draggable2」）.draggable（{軸："× "}）;
$（ "＃Draggable3」）.draggable（{封じ込め："＃封じ込めラッパー "、スクロール：偽}）;
$（ "＃Draggable5」）.draggable（{封じ込め："親 "}）;
}）;
</スクリプト>
</ HEAD>
<ボディ>
<H3>軸制約に沿った運動：</ H3>
<DIVのID = "ドラッグ可能な"クラス= "ドラッグ可能なUIウィジェットコンテンツ」>
<P>のみ垂直抗力ます。</ p>
</ DIV>
<DIVのID = "draggable2"クラス= "ドラッグ可能なUIウィジェットコンテンツ」>
<P>のみ水平ドラッグます。</ p>
</ DIV>
</ H3>：別のDOM要素の<H3>または制約の動き
<DIVのID = "封じ込め-ラッパー">
<DIVのID = "draggable3"クラス= "ドラッグ可能なUIウィジェットコンテンツ」>
<P>私はボックス内に拘束された</ P>
</ DIV>
<DIVクラス= "ドラッグ可能なUIウィジェットコンテンツ」>
<Pのid = "draggable5"クラス= "UIウィジェットヘッダ">私は親要素内に閉じ込められた。</ P>
</ DIV>
</ DIV>
</ BODY>
</ HTML>
カーソルスタイル
オブジェクトをドラッグするとカーソルを配置します。 デフォルトでは、カーソルが真ん中にある、オブジェクトをドラッグしました。 使用cursorAtドラッグ可能なの（の左、右、下、画素値のトップに対して指定された）他に位置を指定するオプション。 で有効なCSSのカーソル値を提供することによりcursorのカーソルの外観をカスタマイズするためのオプション。 有効なCSSのカーソル値は次のとおりですので、上のデフォルト、移動、ポインタ、十字線、およびを。
<！DOCTYPE HTML>
<HTML LANG = "EN">
<ヘッド>
<メタ文字セット= "UTF-8">
<タイトル>のjQuery UIのドラッグ（ドラッグ可能） - カーソルスタイル</タイトル>
<リンクのrel = "スタイルシート"のhref = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<SCRIPT SRC = "// code.jquery.com/jquery-1.9.1.js"> </スクリプト>
<SCRIPT SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </スクリプト>
<リンクのrel = "スタイルシート"のhref = "http://jqueryui.com/resources/demos/style.css">
<スタイル>
#draggable、＃のdraggable2、＃のdraggable3 {幅：100ピクセル、高さ100ピクセル;パディング：0.5em;フロート：左;マージン：0 10pxの10pxの0;}
</スタイル>
<スクリプト>
$（関数（）{
$（ "#draggable」）.draggable（{カーソル：「移動」、cursorAt：{トップ：56は、左：56}}）;
（「＃Draggable2」）.draggable $（{：「十字」、cursorAt：{トップ：-5、左：カーソルは-5}}）;
$（ "＃Draggable3」）.draggable（{cursorAt：{ボトム：0}}）;
}）;
</スクリプト>
</ HEAD>
<ボディ>
<DIVのID = "ドラッグ可能な"クラス= "UIウィジェットコンテンツ」>
<P>私は（マウスに関して）途中で常によ。</ P>
</ DIV>
<DIVのID = "draggable2"クラス= "UIウィジェットコンテンツ」>
<P>私のカーソルが左-5とトップである-5 </ P>
</ DIV>
<DIVのID = "draggable3"クラス= "UIウィジェットコンテンツ」>
<P>私の唯一の「ボトム」の値をカーソルの位置を制御します。</ p>
</ DIV>
</ BODY>
</ HTML>
遅延スタート
delay遅延（ミリ秒）オプション設定のドラッグを開始。 distanceオプション押され、ドラッグ＆ドロップを許可する前に、指定されたピクセルにカーソルをドラッグします。
<！DOCTYPE HTML>
<HTML LANG = "EN">
<ヘッド>
<メタ文字セット= "UTF-8">
<タイトル>のjQuery UIのドラッグ（ドラッグ可能） - 遅延スタート</タイトル>
<リンクのrel = "スタイルシート"のhref = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<SCRIPT SRC = "// code.jquery.com/jquery-1.9.1.js"> </スクリプト>
<SCRIPT SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </スクリプト>
<リンクのrel = "スタイルシート"のhref = "http://jqueryui.com/resources/demos/style.css">
<スタイル>
#draggable、＃のdraggable2 {幅：120ピクセル、高さ120ピクセル;パディング：0.5em;フロート：左;マージン：0 10pxの10pxの0;}
</スタイル>
<スクリプト>
$（関数（）{
$（ "#draggable」）.draggable（{距離：20}）;
$（ "＃Draggable2」）.draggable（{遅延：1000}）;
$（ ".ui-ドラッグ可能」）.disableSelection（）;
}）;
</スクリプト>
</ HEAD>
<ボディ>
<DIVのID = "ドラッグ可能な"クラス= "UIウィジェットコンテンツ」>
<P>私は20ピクセルをドラッグするだけですし、ドラッグし始めます。</ p>
</ DIV>
<DIVのID = "draggable2"クラス= "UIウィジェットコンテンツ」>
後<P>どんなにドラッグする必要がありますし、ドラッグが1000msのを待つようになったどのくらいの距離ます。</ p>
</ DIV>
</ BODY>
</ HTML>
イベント
上のドラッグ可能なstart 、 dragとstopイベント。 開始トリガのドラッグstartイベントを、ドラッグ中にトリガdrag 、イベントトリガされたとき、ドラッグ停止stopイベント。
<！DOCTYPE HTML>
<HTML LANG = "EN">
<ヘッド>
<メタ文字セット= "UTF-8">
<タイトル>のjQuery UIのドラッグ（ドラッグ可能） - イベント</タイトル>
<リンクのrel = "スタイルシート"のhref = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<SCRIPT SRC = "// code.jquery.com/jquery-1.9.1.js"> </スクリプト>
<SCRIPT SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </スクリプト>
<リンクのrel = "スタイルシート"のhref = "http://jqueryui.com/resources/demos/style.css">
<スタイル>
#draggable {幅：16em;パディング：0 1EM;}
#draggable UL李{マージン：1EM 0;パディング：0.5em 0;} * htmlの#draggable ulの李{高さ：1％;}
#draggableのULのli span.uiアイコン{フロート：左;}
#draggableのULのli span.count {フォント重量：太字;}
</スタイル>
<スクリプト>
$（関数（）{
VAR $ start_counter = $（ "＃イベントスタート」）、
$ Drag_counter = $（ "＃イベント - ドラッグ」）、
$ Stop_counter = $（ "＃イベントストップ」）、
カウント= [0、0、0]。
.draggable $（ "#draggable」）（{
開始：機能を（）{
カウント[0] ++;
updateCounterStatus（$のstart_counter、数[0]）;
}、
ドラッグ：関数（）{
カウント[1] ++;
updateCounterStatus（$のdrag_counter、カウント[1]）;
}、
停止：関数（）{
カウント[2] ++;
updateCounterStatus（$のstop_counter、カウント[2]）;
}
}）;
機能updateCounterStatus（$のevent_counter、NEW_COUNT）{
//第1の視覚状態を更新しました...
場合（！$ event_counter.hasClass（「UI-状態-ホバー "））{
$ Event_counter.addClass（「UI-状態-ホバー」）
。.siblings（）RemoveClass（「UI-状態-ホバー "）;
}
// ...そして数$（ "span.count"、$のevent_counter）の.text（NEW_COUNT）を更新。
}
}）;
</スクリプト>
</ HEAD>
<ボディ>
<DIVのID = "ドラッグ可能な"クラス= "UIウィジェットUIウィジェットコンテンツ」>
<P>一連のイベントをトリガ、私をドラッグしてください。 </ P>
<ULクラス= "UIヘルパー・リセット」>
<李ID = "イベント起動"クラス= "UIステートのデフォルトUI-コーナー-すべて"> <スパンクラス= "UI-アイコンUI-アイコンプレイ"> </ span>に呼ばれて「開始」の<spanクラス= "数"> 0 </ span>のXます。</ li>
<李のid = "イベントドラッグ"クラス= "UIステートのデフォルトUI-コーナー-すべて"> <スパンクラス= "UI-アイコンUI-アイコン矢印-4"> </ span>の「ドラッグ」と呼ばれています<スパンクラス= "数"> 0 </ span>のXます。</ li>
<李ID = "イベントストップ"クラス= "UIステートのデフォルトUI-コーナー-すべて"> <スパンクラス= "UI-アイコンUI-アイコンストップ"> </ span>に呼ばれて「停止」の<spanクラス= "数"> 0 </ span>のXます。</ li>
</ UL>
</ DIV>
</ BODY>
</ HTML>
ハンドル
カーソル部分をドラッグでドラッグを指定した場合にのみ許可されています。 使用するhandleドラッグされたオブジェクトのためのjQueryのセレクタの要素（または要素のグループ）を指定するオプションを選択します。
またはときにドラッグ可能な許可されるドラッグ内のカーソル指定された要素（または要素のグループ）。 使用するhandleドラッグ機能jQueryのセレクターをキャンセル指定するオプションを選択します。
<！DOCTYPE HTML>
<HTML LANG = "EN">
<ヘッド>
<メタ文字セット= "UTF-8">
<タイトル>のjQuery UIのドラッグ（ドラッグ可能） - ハンドル</タイトル>
<リンクのrel = "スタイルシート"のhref = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<SCRIPT SRC = "// code.jquery.com/jquery-1.9.1.js"> </スクリプト>
<SCRIPT SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </スクリプト>
<リンクのrel = "スタイルシート"のhref = "http://jqueryui.com/resources/demos/style.css">
<スタイル>
#draggable、＃のdraggable2 {幅：100ピクセル、高さ100ピクセル;パディング：0.5em;フロート：左;マージン：0 10pxの10pxの0;}
#draggable P {カーソル：移動;}
</スタイル>
<スクリプト>
$（関数（）{
$（ "#draggable」）.draggable（{ハンドル：" P "}）;
$（ "＃Draggable2」）.draggable（{キャンセル：「p.uiウィジェットヘッダ"}）;
$（ "本部、P"）.disableSelection（）;
}）;
</スクリプト>
</ HEAD>
<ボディ>
<DIVのID = "ドラッグ可能な"クラス= "UIウィジェットコンテンツ」>
<Pクラス= "UIウィジェットヘッダは">あなただけ、この範囲内でドラッグ＆ドロップすることができますI </ P>
</ DIV>
<DIVのID = "draggable2"クラス= "UIウィジェットコンテンツ」>
<P>あなたはドラッグ＆hellipする私の周りを取ることができます。</ P>
<Pクラス= "UIウィジェットヘッダ">＆hellip;しかし、あなたは、この範囲では</ P>私をドラッグすることはできません
</ DIV>
</ BODY>
</ HTML>
場所を復元
ブール値と同じようにrevertドラッグ可能なオプションは、ドラッグを停止するときに元の場所にドラッグ可能（またはその助手）を返します。
<！DOCTYPE HTML>
<HTML LANG = "EN">
<ヘッド>
<メタ文字セット= "UTF-8">
<タイトル>のjQuery UIのドラッグ（ドラッグ可能） - ロケーションの復元</タイトル>
<リンクのrel = "スタイルシート"のhref = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<SCRIPT SRC = "// code.jquery.com/jquery-1.9.1.js"> </スクリプト>
<SCRIPT SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </スクリプト>
<リンクのrel = "スタイルシート"のhref = "http://jqueryui.com/resources/demos/style.css">
<スタイル>
#draggable、＃のdraggable2 {幅：100ピクセル、高さ100ピクセル;パディング：0.5em;フロート：左;マージン：0 10pxの10pxの0;}
</スタイル>
<スクリプト>
$（関数（）{
$（ "#draggable」）.draggable（{戻す：真}）;
$（ "＃Draggable2」）.draggable（{戻す：真、ヘルパー："クローン "}）;
}）;
</スクリプト>
</ HEAD>
<ボディ>
<DIVのID = "ドラッグ可能な"クラス= "UIウィジェットコンテンツ」>
<P>復元</ P>
</ DIV>
<DIVのID = "draggable2"クラス= "UIウィジェットコンテンツ」>
<P>アシスタントを復元します。</ p>
</ DIV>
</ BODY>
</ HTML>
グリッドの要素にスナップまたは
ドラッグ可能な内部または外部の国境のDOM要素を合わせます。 使用snap 、 snapMode （インナー、アウター、両方）およびsnapTolerance （ピクセル単位要素間のドラッグ可能な距離に位置合わせcallingが）オプションを使用します。
グリッドまたはドラッグ可能に揃えます。 gridサイズオプショングリッドセル（ピクセルの高さや幅）を設定します。
<！DOCTYPE HTML>
<HTML LANG = "EN">
<ヘッド>
<メタ文字セット= "UTF-8">
<タイトル>のjQuery UIのドラッグ（ドラッグ可能） - グリッド要素または</タイトル>に合わせます
<リンクのrel = "スタイルシート"のhref = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<SCRIPT SRC = "// code.jquery.com/jquery-1.9.1.js"> </スクリプト>
<SCRIPT SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </スクリプト>
<リンクのrel = "スタイルシート"のhref = "http://jqueryui.com/resources/demos/style.css">
<スタイル>
.draggable {幅：90PX;高さ：80px;パディング：5pxの;フロート：左;マージン：0 10pxの10pxの0;フォントサイズ：.9em;}
.ui-ウィジェットヘッダP、.ui-ウィジェットコンテンツのP {マージン：0;}
#snaptarget {高さ：140px;}
</スタイル>
<スクリプト>
$（関数（）{
$（ "#draggable」）.draggable（{スナップ：真}）;
$（ "＃Draggable2」）.draggable（{スナップ：「.ui-ウィジェットヘッダー"}）;
$（ "＃Draggable3」）.draggable（{スナップ：「.ui-ウィジェットヘッダ」、SNAPMODE："外 "}）;
$（ "＃Draggable4」）.draggable（{グリッド：[20、20]}）;
$（ "＃Draggable5」）.draggable（{グリッド：[80、80]}）;
}）;
</スクリプト>
</ HEAD>
<ボディ>
<DIVのID = "snaptarget"クラス= "UIウィジェットヘッダ">
<P>私はゴール揃えます。</ p>午前
</ DIV>
<br style="clear:both">
<DIVのID = "ドラッグ可能な"クラス= "ドラッグ可能なUIウィジェットコンテンツ」>
<P>デフォルト（スナップ：真）、他のすべてのドラッグ可能な要素に整列します。</ p>
</ DIV>
<DIVのID = "draggable2"クラス= "ドラッグ可能なUIウィジェットコンテンツ」>
<P>私はちょうど大きな箱に揃えます。</ p>
</ DIV>
<DIVのID = "draggable3"クラス= "ドラッグ可能なUIウィジェットコンテンツ」>
<P>私はちょうど大きな箱の外側のエッジに揃えます。</ p>
</ DIV>
<DIVのID = "draggable4"クラス= "ドラッグ可能なUIウィジェットコンテンツ」>
<P>私は20×20グリッドに整列します。</ p>
</ DIV>
<DIVのID = "draggable5"クラス= "ドラッグ可能なUIウィジェットコンテンツ」>
<P>私は80×80グリッドに整列します。</ p>
</ DIV>
</ BODY>
</ HTML>
視覚フィードバック
オブジェクトをドラッグする方法にアシスタントとして、ユーザにフィードバックを提供します。 helperのオプションは、（カーソルドラッグ可能なコピーを持つ）の値の元」（カーソルドラッグ可能なオブジェクトを持つ）、「クローン」を受け入れる、または関数が（ドラッグディスプレイの周りのカーソルの間にエレメント）DOM要素を返します。 opacityオプションは、透明性のアシスタントを制御します。
ドラッグされたドラッグ可能である区別するために、正面を維持するための運動にはドラッグ可能ましょう。 あなたが使用して、ドラッグしている場合zIndexアシスタントZインデックスの高さを設定し、または使用するオプションをstackドラッグを停止するときに、最後の1がドラッグされていることを確認するためのオプションを項目は常に他のプロジェクトとのグループの最上部に表示されます。
<！DOCTYPE HTML>
<HTML LANG = "EN">
<ヘッド>
<メタ文字セット= "UTF-8">
<タイトル>のjQuery UIのドラッグ（ドラッグ可能） - 視覚的なフィードバック</タイトル>
<リンクのrel = "スタイルシート"のhref = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<SCRIPT SRC = "// code.jquery.com/jquery-1.9.1.js"> </スクリプト>
<SCRIPT SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </スクリプト>
<リンクのrel = "スタイルシート"のhref = "http://jqueryui.com/resources/demos/style.css">
<スタイル>
#draggable、＃のdraggable2、＃のdraggable3、の#set divの{幅：90PX;高さ：90PX;パディング：0.5em;フロート：左;マージン：0 10pxの10pxの0;}
#draggable、＃のdraggable2、＃のdraggable3 {マージン底：20ピクセル;}
#set {クリア：両方;フロート：左;幅：368px;高さ：120ピクセル;}
P {クリア：両方;マージン：0;パディング：1EM 0;}
</スタイル>
<スクリプト>
$（関数（）{
$（ "#draggable」）.draggable（{ヘルパー："オリジナル "}）;
$（ "＃Draggable2」）.draggable（{不透明：0.7、ヘルパー："クローン "}）;
$（ "＃Draggable3」）.draggable（{
カーソル：「移動」、
cursorAt：{トップ：-12、左：-20}、
ヘルパー：関数（イベント）{
$（ "の<divクラス= 'UIウィジェットヘッダ'>私はカスタムヘルパー</ div>のよ」）を返します。
}
}）;
$（ "の#set本部」）.draggable（{スタック："の#set div要素を "}）;
}）;
</スクリプト>
</ HEAD>
<ボディ>
<H3クラス= "ドキュメント">ヘルパー：</ H3>
<DIVのID = "ドラッグ可能な"クラス= "UIウィジェットコンテンツ」>
<P>元</ P>
</ DIV>
<DIVのID = "draggable2"クラス= "UIウィジェットコンテンツ」>
<P>半透明のクローン</ P>
</ DIV>
<DIVのID = "draggable3"クラス= "UIウィジェットコンテンツ」>
<P>（cursorAtと一緒に）カスタムアシスタント</ P>
</ DIV>
<H3クラス= "ドキュメント">スタック：</ H3>
<DIVのID = "設定">
<DIVクラス= "UIウィジェットコンテンツ」>
<P>我々はdraggables .. </ P>
</ DIV>
<DIVクラス= "UIウィジェットコンテンツ」>
<P> ..それは、z-indexが自動的に制御されているのです.. </ P>
</ DIV>
<DIVクラス= "UIウィジェットコンテンツ」>
<P> ..スタックオプションを持ちます。 </ P>
</ DIV>
</ DIV>
</ BODY>
</ HTML>
jQueryのUIのドラッグ可能な+ソート可能
ドラッグ可能とシームレスな相互作用のソート可能な。
<！DOCTYPE HTML>
<HTML LANG = "EN">
<ヘッド>
<メタ文字セット= "UTF-8">
<タイトル>のjQuery UIのドラッグ（ドラッグ可能）+ソート（ソート可能）</タイトル>
<リンクのrel = "スタイルシート"のhref = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<SCRIPT SRC = "// code.jquery.com/jquery-1.9.1.js"> </スクリプト>
<SCRIPT SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </スクリプト>
<リンクのrel = "スタイルシート"のhref = "http://jqueryui.com/resources/demos/style.css">
<スタイル>
UL {リストスタイル型：なし;マージン：0;パディング：0;マージン底：10pxの;}
李{マージン：5pxの;パディング：5pxの;幅：150ピクセル;}
</スタイル>
<スクリプト>
$（関数（）{
.sortable $（ "#sortable」）（{
元に戻す：真
}）;
.draggable $（ "#draggable」）（{
connectToSortable：「#sortable」、
ヘルパー：「クローン」、
元に戻す：「無効」
}）;
$（ "UL、李"）.disableSelection（）;
}）;
</スクリプト>
</ HEAD>
<ボディ>
<UL>
<李のid = "ドラッグ可能な"クラス= "UI-状態-ハイライト">私をドラッグしてくださいます。</ li>
</ UL>
<ULのID = "ソート可能な">
<李クラス= "UI-状態-デフォルト">項目1 </ LI>
<李クラス= "UI-状態-デフォルト">項目2ます。</ li>
<李クラス= "UI-状態-デフォルト">項目3ます。</ li>
<李クラス= "UI-状態-デフォルト">項目4ます。</ li>
<李クラス= "UI-状態-デフォルト">項目5ます。</ li>
</ UL>
</ BODY>
</ HTML>