YUIライブラリを使ったドラッグ&ドロップ

Yahoo! User Interface Library (YUI)を使ったドラッグ&ドロップを紹介します。いまいち使う場面が思いつかないけど良い使い方があるはず!
まずはいつもどうり外部JavaScriptを読み込みます。現在はバージョン2.7.0が最新となっています。
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/fonts/fonts-min.css" />
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/dragdrop/dragdrop-min.js"></script>
的のサイズや色や位置はスタイルシートで自由に変更できます。こちらはサンプルですので色々変更してみてください。
<style type="text/css">
.dd-demo {
    position:relative;
    border:2px solid #666;
    text-align:center;
    color:#fff;
    cursor:move;
    height:100px;
    width:200px;
}
#dd-demo-1 { 
    background-color:#FFE4E1;top:0px; left:20px;
}
#dd-demo-2 { 
    background-color:#E6E6FA;top:70px; left:145px;
}
#dd-demo-3 {
    background-color:#E0FFFF;top:-150px; left:285px;
}
</style>
body内はこれだけです。div内は空白でもいいですし、文字でもタグでも入れることができます。ま、空白だと実用性がないですね。
<div class=" yui-skin-sam">
<div id="dd-demo-1" class="dd-demo"></div>
  <div id="dd-demo-2" class="dd-demo"></div>
  <div id="dd-demo-3" class="dd-demo"></div>
</div>
最後に以下のJavaScriptを挿入して終わりです。
<script type="text/javascript">
  (function() {
    var dd, dd2, dd3;
      YAHOO.util.Event.onDOMReady(function() {
        dd = new YAHOO.util.DD("dd-demo-1");
        dd2 = new YAHOO.util.DD("dd-demo-2");
        dd3 = new YAHOO.util.DD("dd-demo-3");
      });
    })();
</script>
フィードやTwitterで最新情報をチェック
follow us in feedly
この記事に付いているタグの最新記事一覧
loading...
コメント









※コメントはご意見ご感想や間違いのご指摘等にしていただけますようお願いいたします。コメントを確認する時間がなく、技術的なご質問をいただいても答えできません。申し訳ございませんがご理解のほどお願いいたします。

Recent Entry
Popular Entry
  • このエントリーをはてなブックマークに追加