要素をドラッグできるようにする。
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>
参考: