Droppable

Draggable要素をドロップできるようにします。
ドロップを受け入れるDraggable要素を指定することができます。

書式

jQuery_Object.droppable([options]);

依存ファイル

引数

戻り値

例

例1:様々なオプションで、Droppableな要素を生成します。（オプションと動きを確認してください。）

/* --- CSS --- */
div.orange-active {background-color:papayawhip;}
div.orange-hover  {background-color:darkorange;}
div.pink-active {background-color:lavenderblush;}
div.pink-hover  {background-color:deeppink;}

// --- 橙色のDroppable要素 ---
$(".orange").droppable({
    accept: ".blue, .green",       // .blueと.greenをドロップ可能にする
    tolerance: "fit",              // Draggable要素が完全に入った場合にDrop可能にする
    activeClass: "orange-active",  // Draggable要素がドラッグしているときに適用するクラス
    hoverClass: "orange-hover",    // Draggable要素が上に乗ったときに適用するクラス
    drop: function(ev, ui) {
        // ドロップされたときにDraggable要素を複製して追加
        ui.draggable.clone().appendTo(this);
    },
    over: function(ev, ui) {
        // Draggable要素が上に乗ったときに文字を表示
        $(".over", this).show().fadeOut(1000);
    }
})

// --- ピンク色のDroppable要素 ---
$(".pink").droppable({
    accept: ".gray, .blue",        // .gray, .blueをドロップ可能にする
    tolerance: "touch",            // Draggable要素が接触した場合にDrop可能にする
    activeClass: "pink-active",    // Draggable要素がドラッグしているときに適用するクラス
    hoverClass: "pink-hover",      // Draggable要素が上に乗ったときに適用するクラス
    drop: function(ev, ui) {
        // ドロップされたDraggable要素を追加
        ui.draggable.appendTo(this);
    },
    over: function(ev, ui) {
        // Draggable要素が上に乗ったときに文字を表示
        $(".over", this).show().fadeOut(1000);
    }
})

Droppable要素に付与されるクラス

Droppable要素には、状態に応じて以下のクラスが設定されます。

クラス	状態
ui-droppable	Droppable要素
ui-droppable-disabled	ドロップ無効
activeClass	Draggable要素がドラッグしているとき。activeClassプロパティに指定したクラス
hoverClass	Draggable要素が上に乗ったとき。hoverClassプロパティに指定したクラス

例）Draggable要素が上に乗ったときのDroppable要素

<droppable要素 class="ui-droppable activeClassプロパティに指定したクラス hoverClassプロパティに指定したクラス">

cssの定義の順番に注意

activeClass / hoverClass クラスのCSSの定義は、activeClass，hoverClassの順に行ってください。これは、jQueryが次のようにクラスを設定していることによります。

Draggable要素がドラッグしているとき

<droppable要素 class="ui-droppable activeClassプロパティに指定したクラス">

Draggable要素が上に乗ったとき

<droppable要素 class="ui-droppable activeClassプロパティに指定したクラス hoverClassプロパティに指定したクラス">

Draggable要素が上に乗ったときも、activeClassで指定したクラスが付与されている事に注目してください。
もし、cssでhoverClass，activeClassの順番で定義されていた場合、重複している項目については、hoverClassの内容をactiveClassの内容で上書きしてしまいます。

解説

書式

依存ファイル

引数

イベントハンドラ関数

戻り値

例

Droppable要素に付与されるクラス

cssの定義の順番に注意