jQueryUI：ドラッグ＆ドロップの制御

サンプルはこちら。

前回はドラッグする方法を紹介しましたが、それだけでは意味がありません。
ドラッグした後にドロップする時の挙動も含めて一つの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」内にドロップされた時、その中の文字を置き換える処理をしています。