jQuery Draggable

jQuery UIのHPより、ひな形をダウンロードします。
jQueryUI

draggableは以下のように書きます。
$(function(){
$(‘#hoge’).draggable();
}); 

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>jQuery UI</title>
    <link rel="stylesheet" href="jquery-ui.min.css">
    <script src="./external/jquery/jquery.js"></script>
    <script src="jquery-ui.min.js"></script>
    <style>
    #box {
    width: 100px;
    height: 100px;
    background: green;
    }
  </style>
  </head>
  <body>
  <div id="box">box</div>

  <script>
    $(function(){
      $('#box').draggable();
    });    
  </script>
  </body>
</html>

設定、イベント

$(function(){
      $('#box').draggable({
        // axis: 'x'
        opacity: 0.5,
        // handle: '.handle'
        drag: function(event, ui){
          console.log(ui.position);
        }
      });
    });