サンプルはこちら。
前回はドラッグする方法を紹介しましたが、それだけでは意味がありません。
ドラッグした後にドロップする時の挙動も含めて一つのUIになります。
JavaScript
$(function() { $('.tip').draggable({ containment: 'parent', helper: 'clone', opacity: 0.5 }); $('.drop').droppable({ drop: function(e, ui) { $(this).html(ui.draggable.text() + 'がドロップされました。'); } }); });
前回の「.draggable()」コンポーネントに加え、「.droppable()」コンポーネントを使っています。
2行目で「.tip」を「.draggable()」でドラッグ可能にしていますが、オプションのパラメータを指定しています。
7行目で「.drop」内にドロップされた際の処理を記述しています。
$(this)はドロップされた「.drop」自身を指し、「ui.draggable」はドラッグした要素を指します。
今回の処理では「.drop」内にドロップされた時、その中の文字を置き換える処理をしています。