jQuery-UI を使った要素のドラッグ

jQuery-UIのdraggableを使って要素をドラッグすることができる。もちろんHTMLでも可能である。
どちらのほうが良いかは分からないが、使いやすいほうを選べばよい。
jQuery-UIのdraggableを使った場合は次のようになる。

<style type="text/css">
div#red,div#blue {
    width:100px;
    height:100px;
    padding:3px;
    color:white;
    fount-weight:bold;
}
#red  {
    background-color:red;
}
#blue {
    background-color:blue;
}
</style>
</HEAD>
<body>
<div id="red">ドラッグできる要素</div>
<div id="blue">これもドラッグできる要素</div>
<script type="text/javascript">
$(function(){
  $('div#red,div#blue').draggable({      // <div id="red">と<div id="blue">をドラッグ可能にする
      start: function (event , ui){
               $(this).css('background','#33ff33')
             },
      stop : function (event , ui){
               $(this).css('background','#a9a9a9')
             }
  });
});
</script>

サンプル

ドラッグできる要素
これもドラッグできる要素