Yahoo UI を使ってドラッグ＆ドロップを実装します。
ほんとに簡単なコードで実装できます。Yahoo UI恐るべし。
今回使うファイルはダウンロードしたyuiの
build/fonts/fonts-min.css
build/yahoo-dom-event/yahoo-dom-event.js
build/dragdrop/dragdrop-min.js
以上の３つです。
サーバーにあげたりするときはbuild/ だけで１０ＭＢもあるので必要なファイルのみアップロードします。
コードをのっけます。
htmlソース
Sample | Yahoo UI ドラッグ＆ドロップ
area1
ドラッグ＆ドロップできます。
ドラッグ＆ドロップできます。
area2
ドラッグ＆ドロップできます。
ドラッグ＆ドロップできます。
area3
ドラッグ＆ドロップできます。
ドラッグ＆ドロップできます。
注意点
- Yahoo UIを使いコントロールする部分は<div class=”yui-skin-sam”></div>でくくる。（<body class=”yui-skin-sam”）>としとけば問題ないです。どうやらくくらないとスタイルシートが適応されない。
すいません。今回のサンプルではYahooUIの持っているスタイルを適応させる場所がないのでこの記述はいらないです。
fonts-min.cssをインクルードする必要もないです。 - 今回サンプルを作る時に躓いたんですが、
<script type=”text/javascript” src=”./js/build/yahoo-dom-event/yahoo-dom-event.js”></script>
<script type=”text/javascript” src=”./js/build/dragdrop/dragdrop-min.js”></script>
この部分、上下をかえてdragdrop-min.jsを最初に読み込むとうまく動きませんでした。
javascriptソース
// JavaScript Document
YAHOO.namespace(”sample”);
var dd1, dd2, dd3;
YAHOO.sample.init = function() {
//area1
dd1 = new YAHOO.util.DD(”area1″);
//area2
dd2 = new YAHOO.util.DD(”area2″);
//area2
dd3 = new YAHOO.util.DD(”area3″);
}
YAHOO.util.Event.onDOMReady(YAHOO.sample.init);
これだけの記述でドラッグ＆ドロップが実装できる。
ＩＤを指定するだけでいいので既存のサイトにもすぐ埋め込めるのでは？
0 Responses
Stay in touch with the conversation, subscribe to the RSS feed for comments on this post.