ドラッグドロップ で jQuery UI を試してみる

注意

このJavaScriptは習作です。 至らない点が各所に残っている可能性があるので、参考にする際はご注意ください。

Sample

example1

example2

dropp 1
dropp 2

Code

$(function() {

  $('#drag1').draggable({ helper: 'original' });
  $('#drag2').draggable({ helper: 'original' });

  $('#dropp1').droppable({
    drop: function(event, ui) {
      $(this).addClass('dropDone1').find('div').html('Dooooone!');
    }
  });
  $('#dropp2').droppable({
    drop: function(event, ui) {
      $(this).addClass('dropDone2').find('div').html('Dooooone!');
    }
  });

});

JavaScript1000本ノック トップページへ