要素をドラッグできるようにする。

Yahoo! UI Libraryのドラッグ&ドロップユーティリティを使って、要素をドラッグできるようにしてみます。
手順は次の通り。簡単です。

dragdrop-min.jsなどのライブラリファイルHTMLに追加。
引数としてドラッグできるようにする要素を指定し、YAHOO.util.DDのインスタンスを生成する。

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    
    <!-- 必要なライブラリを追加。 -->
    <script type="text/javascript" src="./yui/yahoo-min.js"></script>
    <script type="text/javascript" src="./yui/dom-min.js"></script>
    <script type="text/javascript" src="./yui/event-min.js"></script>
    <script type="text/javascript" src="./yui/dragdrop-min.js"></script>
    <script type="text/javascript" src="./yui/yahoo-dom-event.js"></script>
</head>
<body>
    <!-- ドラッグできるようにする要素。 -->
    <div id="drag" style="background-color:#bbbbbb;width:100px;height:100px;padding:10px;" >
      ドラッグできます。
    </div>
    
    <script type="text/javascript">

       // ドラッグ開始!
       new YAHOO.util.DD("drag");

    </script>
</body>
</html>

確認はこちらから

参考: