|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Droppable
解説
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); } })
.gray
.blue
.green
.orange
Over!
.pink
Over!
Droppable要素に付与されるクラスDroppable要素には、状態に応じて以下のクラスが設定されます。
例)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で指定したクラスが付与されている事に注目してください。 |
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
© 2007-2011 by いけまさ. All rights Reserved. |