Jqueryui-droppable
JqueryUI-ドロップ可能
jQueryUIは* droppable（）*メソッドを提供して、指定されたターゲット（ドラッグ可能な要素のターゲット）でDOM要素をドロップ可能にします。
構文
- droppable（）*メソッドは2つの形式で使用できます-
- link：/jqueryui/jqueryui_droppable＃droppable_options [$（selector、context）.droppable（options）]メソッド
- link：/jqueryui/jqueryui_droppable＃droppable_methods [$（selector、context）.droppable（ "action"、params）]メソッド
[droppable_options]#
$（セレクター、コンテキスト）.droppable（オプション）メソッド
_droppable（options）_メソッドは、HTML要素を他の要素をドロップできる要素として使用できることを宣言します。 _options_パラメーターは、関連する要素の動作を指定するオブジェクトです。
構文
$(selector, context).droppable (options);Javascriptオブジェクトを使用して、一度に1つ以上のオプションを提供できます。 提供する複数のオプションがある場合は、次のようにカンマを使用してそれらを分離します-
$(selector, context).droppable({option1: value1, option2: value2..... });次の表は、この方法で使用できるさまざまな_オプション_を示しています-
| Sr.No. | Option & Description |
|---|---|
| 1 |
このオプションは、ドロップ可能な要素をどのドラッグ可能要素で制御する必要がある場合に使用されます。 デフォルトでは、その値は***です。 オプション-受け入れ このオプションは、ドロップ可能な要素をどのドラッグ可能要素で制御する必要がある場合に使用されます。 デフォルトでは、その値は***で、すべてのアイテムがドロップ可能に受け入れられることを意味します。 これはタイプにすることができます-
構文 |
| 2 |
このオプションは、受け入れられた要素（_options.accept_に示されている要素の1つ）がドラッグされているときにドロップ可能な要素に追加される1つ以上のCSSクラスを表す文字列です。 デフォルトでは、その値は false です。
このオプションは、受け入れられた要素（_options.accept_に示されている要素の1つ）がドラッグされているときにドロップ可能な要素に追加される1つ以上のCSSクラスを表す文字列です。 デフォルトでは、その値は false です。 構文 |
| 3 |
このオプションを_false_に設定すると、_ui-droppable_クラスがドロップ可能な要素に追加されなくなります。 デフォルトでは、その値は true です。
このオプションを_false_に設定すると、ui-droppable_クラスがドロップ可能な要素に追加されなくなります。 デフォルトでは、その値は true です。 これは、数百の要素で.droppable（）_ initを呼び出すときのパフォーマンスの最適化として望ましい場合があります。 構文 |
| 4 |
このオプションを_true_に設定すると、ドロップ可能が無効になります。 デフォルトでは、その値は false です。 オプション-無効 このオプションを_true_に設定すると、ドロップ可能が無効になります。つまり、指定された要素上でのアイテムの移動とそれらの要素へのドロップが無効になります。 デフォルトでは、その値は false です。 構文 |
| 5 |
このオプションは、ネストされたドロップ可能項目にドロップするためにどのドラッグ可能要素を受け入れるかを制御する必要がある場合に使用されます。 デフォルトでは、その値は false です。 このオプションが_true_に設定されている場合、親droppablesは要素を受け取りません。 オプション-貪欲 このオプションは、ネストされたドロップ可能項目にドロップするためにどのドラッグ可能要素を受け入れるかを制御する必要がある場合に使用されます。 デフォルトでは、その値は false です。 このオプションが_true_に設定されている場合、親droppablesは要素を受け取りません。 構文 |
| 6 |
このオプションは、受け入れられる要素（_options.accept_で示される要素）がdroppableの要素に移動するときに追加される1つ以上のCSSクラスを表す_String_です。 デフォルトでは、その値は false です。
このオプションは、受け入れられる要素（_options.accept_で示される要素）がdroppableの要素に移動するときに追加される1つ以上のCSSクラスを表す_String_です。 デフォルトでは、その値は false です。 構文 |
| 7 |
このオプションは、ドラッグ可能な要素のドロップ可能なアクションを、同じ_options.scope_（draggable（options）で定義）を持つアイテムのみに制限するために使用されます。 デフォルトでは、その値は "default" です。 オプション-スコープ このオプションは、ドラッグ可能な要素のドロップ可能なアクションを、同じ_options.scope_（draggable（options）で定義）を持つアイテムのみに制限するために使用されます。 デフォルトでは、その値は "default" です。 構文 |
| 8 |
このオプションは、ドラッグ可能なオブジェクトがドロップ可能なオブジェクトの上にあるかどうかをテストするために使用するモードを指定する_String_です。 デフォルトでは、その値は "intersect" です。 オプション-公差 このオプションは、受け入れ可能なドロップのドロップ可能要素をドラッグ可能要素がどのようにカバーするかを指定する_String_です。 デフォルトでは、その値は "intersect" です。 可能な値は-
構文 |
次のセクションでは、ドロップ機能のいくつかの実用例を示します。
デフォルトの機能
次の例は、* droppable（）*メソッドにパラメーターを渡さない、ドロップ可能な機能の簡単な例を示しています。
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Droppable - Default functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style>
#draggable-1 {
width: 100px; height: 50px; padding: 0.5em; float: left;
margin: 22px 5px 10px 0;
}
#droppable-1 {
width: 120px; height: 90px;padding: 0.5em; float: left;
margin: 10px;
}
</style>
<script>
$(function() {
$( "#draggable-1" ).draggable();
$( "#droppable-1" ).droppable();
});
</script>
</head>
<body>
<div id = "draggable-1" class = "ui-widget-content">
<p>Drag me to my target</p>
</div>
<div id = "droppable-1" class = "ui-widget-header">
<p>Drop here</p>
</div>
</body>
</html>上記のコードをHTMLファイル dropexample に保存して、JavaScriptをサポートする標準のブラウザーで開きます。次の出力が表示されます。 今、あなたは結果で遊ぶことができます-
addClass、無効、および許容値の使用
次の例は、JqueryUIのドロップ関数での3つのオプション*（a）addClass（b）disabled および（c）許容値*の使用法を示しています。
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Droppable - Default functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style>
#draggable-2 {
width: 100px; height: 50px; padding: 0.5em;
margin: 0px 5px 10px 0;
}
#droppable-2,#droppable-3, #droppable-4,#droppable-5 {
width: 120px; height: 90px;padding: 0.5em; float: left;
margin: 10px;
}
</style>
<script>
$(function() {
$( "#draggable-2" ).draggable();
$( "#droppable-2" ).droppable({
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
l( "Dropped!" );
}
});
$( "#droppable-3" ).droppable({
disabled : "true",
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
l( "Dropped!" );
}
});
$( "#droppable-4" ).droppable({
tolerance: 'touch',
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
l( "Dropped with a touch!" );
}
});
$( "#droppable-5" ).droppable({
tolerance: 'fit',
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
l( "Dropped only when fully fit on the me!" );
}
});
});
</script>
</head>
<body>
<div id = "draggable-2" class = "ui-widget-content">
<p>Drag me to my target</p>
</div>
<div id = "droppable-2" class = "ui-widget-header">
<p>Drop here</p>
</div>
<div id = "droppable-3" class = "ui-widget-header">
<p>I'm disabled, you can't drop here!</p>
</div>
<div id = "droppable-4" class = "ui-widget-header">
<p>Tolerance Touch!</p>
</div>
<div id = "droppable-5" class = "ui-widget-header">
<p>Tolerance Fit!</p>
</div>
</body>
</html>上記のコードをHTMLファイル dropexample に保存して、JavaScriptをサポートする標準のブラウザーで開きます。次の出力が表示されます。 今、あなたは結果で遊ぶことができます-
次に、「Tolerance Touch！」に要素をドロップしますボックス（このボックスの端をタッチするだけ）でターゲット要素の変更を確認します。 次に、「Tolerance Fit！」に要素をドロップしますターゲットの場合、ドラッグ可能な要素はターゲット要素と完全にオーバーラップする必要があります。つまり、「Tolerance Fit！」ターゲット。
ドロップする要素を選択してください
次の例は、JqueryUIのドラッグ機能でオプション accept および scope オプションを使用する方法を示しています。
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Droppable - Default functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style>
.wrap {
display: table-row-group;
}
#japanpeople,#indiapeople, #javatutorial,#springtutorial {
width: 120px; height: 70px; padding: 0.5em; float: left;
margin: 0px 5px 10px 0;
}
#japan,#india,#java,#spring {
width: 140px; height: 100px;padding: 0.5em; float: left;
margin: 10px;
}
</style>
<script>
$(function() {
$( "#japanpeople" ).draggable();
$( "#indiapeople" ).draggable();
$( "#japan" ).droppable({
accept: "#japanpeople",
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
l( "Dropped!" );
}
});
$( "#india" ).droppable({
accept: "#indiapeople",
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
l( "Dropped!" );
}
});
$( "#javatutorial" ).draggable({scope : "java"});
$( "#springtutorial" ).draggable({scope : "spring"});
$( "#java" ).droppable({
scope: "java",
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
l( "Dropped!" );
}
});
$( "#spring" ).droppable({
scope: "spring",
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
l( "Dropped!" );
}
});
});
</script>
</head>
<body>
<div class = "wrap" >
<div id = "japanpeople" class = "ui-widget-content">
<p>People to be dropped to Japan</p>
</div>
<div id = "indiapeople" class = "ui-widget-content">
<p>People to be dropped to India</p>
</div>
<div id = "japan" class = "ui-widget-header">
<p>Japan</p>
</div>
<div id = "india" class = "ui-widget-header">
<p>India</p>
</div>
</div>
<hr/>
<div class = "wrap" >
<div id = "javatutorial" class = "ui-widget-content">
<p>People who want to learn Java</p>
</div>
<div id = "springtutorial" class = "ui-widget-content">
<p>People who want to learn Spring</p>
</div>
<div id = "java" class = "ui-widget-header">
<p>Java</p>
</div>
<div id = "spring" class = "ui-widget-header">
<p>Spring</p>
</div>
</div>
</body>
</html>上記のコードをHTMLファイル dropexample に保存して、JavaScriptをサポートする標準のブラウザーで開きます。次の出力が表示されます。 今、あなたは出力で遊ぶことができます-
ここでは、「Japan」ターゲットのみに要素「People from Japan」を、ターゲットインドに「People from India」要素をドロップできることがわかります。 同様に、「Javaを学習したい人」のスコープは「Java」をターゲットに設定され、「Springを学習したい人」は「Springターゲット」に設定されます。
外観の管理
次の例は、JqueryUIクラスの activeClass および hoverClass オプションの使用方法を示しています。これらは、外観の管理に役立ちます。
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Droppable - Default functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style type = "text/css">
#draggable-3 {
width: 100px; height: 50px; padding: 0.5em; float: left;
margin: 21px 5px 10px 0;
}
#droppable-6 {
width: 120px; height: 90px;padding: 0.5em; float: left;
margin: 10px;
}
.active {
border-color : blue;
background : grey;
}
.hover {
border-color : red;
background : green;
}
</style>
<script>
$(function() {
$( "#draggable-3" ).draggable();
$( "#droppable-6" ).droppable({
activeClass: "active",
hoverClass: "hover",
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
l( "Dropped!" );
}
});
});
</script>
</head>
<body>
<div id = "draggable-3" class = "ui-widget-content">
<p>Drag me to my target</p>
</div>
<div id = "droppable-6" class = "ui-widget-header">
<p>Drop here</p>
</div>
</body>
</html>上記のコードをHTMLファイル dropexample に保存して、JavaScriptをサポートする標準のブラウザで開きます。次の出力が表示されます-
「ターゲットにドラッグしてください」要素をドラッグまたはホバーする（ターゲット上に）と、ターゲット要素の「ここにドロップする」の色が変わることがわかります。
[droppable_methods]#
$（セレクター、コンテキスト）.droppable（ "action"、params）メソッド
_droppable（ "action"、params）_メソッドは、ドロップ可能な機能の防止など、ドロップ可能な要素に対してアクションを実行できます。 アクションは、最初の引数で文字列として指定されます（たとえば、ドロップを防ぐために「無効にする」）。 次の表で、渡すことができるアクションを確認してください。
構文
$(selector, context).droppable ("action", params);;次の表は、このメソッドで使用できるさまざまな_アクション_を示しています-
| Sr.No. | Action & Description |
|---|---|
| 1 |
このアクションは、要素のドロップ可能な機能を完全に破壊します。 要素は初期化前の状態に戻ります。 アクション-破壊 このアクションは、要素のドロップ可能な機能を完全に破壊します。 要素は初期化前の状態に戻ります。 構文 |
| 2 |
このアクションは、ドロップ可能な操作を無効にします。 要素はドロップ可能な要素ではなくなりました。 このメソッドは引数を取りません。 アクション-無効 このアクションは、ドロップ可能な操作を無効にします。 要素はドロップ可能な要素ではなくなりました。 このメソッドは引数を取りません。 構文 |
| 3 |
このアクションにより、ドロップ可能な操作が再びアクティブになります。 要素は再びドロップ可能な要素を受け取ることができます。 このメソッドは引数を取りません。 アクション-有効 このアクションにより、ドロップ可能な操作が再びアクティブになります。 要素は再びドロップ可能な要素を受け取ることができます。 このメソッドは引数を取りません。 構文 |
| 4 |
このアクションは、現在のドロップ可能なオプションのハッシュを表すキー/値のペアを含むオブジェクトを取得します。 このメソッドは引数を取りません。 アクション-オプション このアクションは、現在のドロップ可能なオプションのハッシュを表すキー/値のペアを含むオブジェクトを取得します。 このメソッドは引数を取りません。 構文 |
| 5 |
このアクションは、指定された_optionName_に現在関連付けられているドロップ可能な要素の値を取得します。 これは引数として文字列値を取ります。 アクション-option（optionName） このアクションは、指定された_optionName_に現在関連付けられているドロップ可能な要素の値を取得します。 これは引数として文字列値を取ります。 構文 |
| 6 |
このアクションは、指定された_optionName_に関連付けられたドロップ可能なオプションの値を設定します。 アクション-option（optionName、value） このアクションは、指定された_optionName_に関連付けられたドロップ可能なオプションの値を設定します。 引数_optionName_は設定するオプションの名前であり、_value_はオプションに設定する値です。 構文 |
| 7 |
このアクションは、ドロップ可能の1つ以上のオプションを設定します。 引数_options_は、設定するオプションと値のペアのマップです。 アクション-オプション（オプション） このアクションは、ドロップ可能の1つ以上のオプションを設定します。 引数_options_は、設定するオプションと値のペアのマップです。 構文 |
| 8 |
このアクションは、ドロップ可能な要素を含むjQueryオブジェクトを返します。 このメソッドは引数を取りません。 このアクションは、ドロップ可能な要素を含むjQueryオブジェクトを返します。 このメソッドは引数を取りません。 構文 |
例
ここで、上の表のアクションを使用した例を見てみましょう。 次の例は、_destroy（）_メソッドの使用方法を示しています。
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Droppable - Default functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style>
.draggable-4 {
width: 90px; height: 50px; padding: 0.5em; float: left;
margin: 0px 5px 10px 0;
border: 1px solid red;
background-color:#B9CD6D;
}
.droppable-7 {
width: 100px; height: 90px;padding: 0.5em; float: left;
margin: 10px;
border: 1px solid black;
background-color:#A39480;
}
.droppable.active {
background-color: red;
}
</style>
<script>
$(function() {
$('.draggable-4').draggable({ revert: true });
$('.droppable-7').droppable({
hoverClass: 'active',
drop: function(e, ui) {
$(this)l(ui.draggable.remove()l());
$(this).droppable('destroy');
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
l( "i'm destroyed!" );
}
});
});
</script>
</head>
<body>
<div class = "draggable-4"><p>drag 1</p></div>
<div class = "draggable-4"><p>drag 2</p></div>
<div class = "draggable-4"><p>drag 3</p></div>
<div style = "clear: both;padding:10px"></div>
<div class = "droppable-7">drop here</div>
<div class = "droppable-7">drop here</div>
<div class = "droppable-7">drop here</div>
</body>
</html>上記のコードをHTMLファイル dropexample に保存して、JavaScriptをサポートする標準のブラウザで開きます。次の出力が表示されます-
「ここにドロップ」という名前のエレメントのいずれかに「drag1」をドロップすると、このエレメントがドロップされ、このアクションによりエレメントのドロップ可能な機能が完全に破壊されることがわかります。 この要素に「drag2」と「drag3」を再度ドロップすることはできません。
ドロップ可能な要素のイベント管理
前のセクションで見たドロップ可能な（オプション）メソッドに加えて、JqueryUIは特定のイベントに対してトリガーされるイベントメソッドを提供します。 これらのイベントメソッドは以下のとおりです-
| Sr.No. | Event Method & Description |
|---|---|
| 1 |
このイベントは、受け入れられたドラッグ可能な要素がドラッグを開始するとトリガーされます。 これは、ドロップ可能にドロップ可能な「ライトアップ」を作成する場合に役立ちます。 イベント-activate（event、ui） このイベントは、受け入れられたドラッグ可能な要素がドラッグを開始するとトリガーされます。 これは、ドロップ可能にドロップ可能な「ライトアップ」を作成する場合に役立ちます。 ここで、_event_は_Event_型であり、_ui_は_Object_型です。 _ui_の可能な値は-
構文 |
| 2 |
このイベントは、ドロップ可能な要素が作成されるとトリガーされます。 ここで、_event_は_Event_型であり、_ui_は_Object_型です。 イベント-create（event、ui） このイベントは、ドロップ可能な要素が作成されるとトリガーされます。 ここで、_event_は_Event_型であり、_ui_は_Object_型です。 構文 |
| 3 |
このイベントは、受け入れられたドラッグ可能がドラッグを停止したときにトリガーされます。 ここで、_event_は_Event_型であり、_ui_は_Object_型です。 イベント-deactivate（event、ui） このイベントは、受け入れられたドラッグ可能がドラッグを停止したときにトリガーされます。 _event_は_Event_型であり、_ui_は_Object_型であり、可能な型は-
構文 |
| 4 |
このアクションは、要素がドロップ可能にドロップされるとトリガーされます。 これは、_tolerance_オプションに基づいています。 ここで、_event_は_Event_型であり、_ui_は_Object_型です。 イベント-ドロップ（イベント、UI） このアクションは、要素がドロップ可能にドロップされるとトリガーされます。 これは、_tolerance_オプションに基づいています。 _event_は_Event_型であり、_ui_は_Object_型であり、可能な型は-
構文 |
| 5 |
このイベントは、受け入れられたドラッグ可能な要素がドロップ可能からドラッグされるとトリガーされます。 これは、_tolerance_オプションに基づいています。 ここで、_event_は_Event_型であり、_ui_は_Object_型です。 イベント-out（event、ui） このイベントは、受け入れられたドラッグ可能な要素がドロップ可能からドラッグされるとトリガーされます。 これは、_tolerance_オプションに基づいています。 ここで、_event_は_Event_型であり、_ui_は_Object_型です。 構文 |
| 6 |
このイベントは、受け入れられたドラッグ可能な要素がドロップ可能上にドラッグされるとトリガーされます。 これは、_tolerance_オプションに基づいています。 ここで、_event_は_Event_型であり、_ui_は_Object_型です。 イベント-over（event、ui） このイベントは、受け入れられたドラッグ可能な要素がドロップ可能上にドラッグされるとトリガーされます。 これは、_tolerance_オプションに基づいています。 _event_は_Event_型であり、_ui_は_Object_型であり、可能な型は-
構文 |
例
次の例は、ドロップ機能中のイベントメソッドの使用方法を示しています。 この例は、drop _、 over_、および_out_イベントの使用方法を示しています。
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Droppable - Default functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style>
#draggable-5 {
width: 100px; height: 50px; padding: 0.5em; float: left;
margin: 22px 5px 10px 0;
}
#droppable-8 {
width: 120px; height: 90px;padding: 0.5em; float: left;
margin: 10px;
}
</style>
<script>
$(function() {
$( "#draggable-5" ).draggable();
$("#droppable-8").droppable({
drop: function (event, ui) {
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
l( "Dropped!" );
},
over: function (event, ui) {
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
l( "moving in!" );
},
out: function (event, ui) {
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
l( "moving out!" );
}
});
});
</script>
</head>
<body>
<div id = "draggable-5" class = "ui-widget-content">
<p>Drag me to my target</p>
</div>
<div id = "droppable-8" class = "ui-widget-header">
<p>Drop here</p>
</div>
</body>
</html>上記のコードをHTMLファイル dropexample に保存して、JavaScriptをサポートする標準のブラウザで開きます。次の出力が表示されます-
ここでは、要素をドラッグすると、ドロップ可能な要素内のメッセージがどのように変化するかがわかります。
