人気ランキング (TOP 20)
注目のタグサイト内検索カスタム検索インターネット、コンピュータ 向きの検索 
カスタム検索
最近の更新連絡先
|
drag&dropDrag & Drop - HTML5 版
Firefox 3.5 以外に、Chrome 4 でも動くように JavaScript を修正しました。 Chrome 3, Safari 4 では視覚的に問題がありますが動きます。 修正内容は更新履歴を参照してください。 2009-11-18 HTML5 の Drag and Drop API を使用して作成した、ドラッグ＆ドロップのサンプルです。 作り方は、 HTML5 Drag and drop demonstration を参考にしました。 実際に動いているものを目にすると励まされますね。 どうも有難う、Laurent Jouanneau. 他の資料としては、 ドラッグの操作 - MDC あたりにも目を通しておくと良いかも知れません（より良い実装方法が見つかるかも？）。 Drag & Drop - Ext JS 版Ajax JavaScript Framework の Ext JS 2.0 を使用して作成した、ドラッグ＆ドロップのサンプルです。 Ext JS は、Yahoo! UI, jQuery, Prototype といった、他の Framework と組み合わせて使うことが出来ますが、 今回のサンプルでは、他の Framework とは組み合わせずに、すべて Ext JS でまかなっています。 サンプルについて、ブラウザごとの動作確認結果は Drag & Drop (Ajax JavaScript) にまとめてあります。 Drag & Drop - Adobe Flex 版
ルック＆フィールは、これまでに作成してきた Ajax/JavaScript Framework を使用したものとは少しだけ異なります。 このデモは、Flash Player 9 がインストールされているブラウザ上ですぐに動かすことが出来ます。 JavaScript Framework 人気があるのはどれ？JavaScript Framework の人気を調べてみました。 Drag & Drop - Dojo 版Ajax JavaScript Framework の Dojo 0.4.1 を使用して作成した、ドラッグ＆ドロップのサンプルです。 サンプルについて、ブラウザごとの動作確認結果は Drag & Drop (Ajax JavaScript) にまとめてあります。 Drag & Drop - jQuery 版Ajax JavaScript Framework の jQuery 1.2.1 と jQuery UI (trunk) を使用して作成した、ドラッグ＆ドロップのサンプルです。 jQuery UI のバージョンは 1.0 ではなく、trunk を使用しています。 理由は、1.0 では IE 関連のコードがバギーなためです。 実際に 1.0 を使用してドラッグ＆ドロップのサンプルを作成したところ、 Firefox, Safari, Opera では動作しましたが、IE では動作しませんでした。 そして trunk を使用した場合は、問題なく動作することを確認しました。 サンプルでは trunk の中から、次の6本のモジュールをダウンロードして使用しています。
(1) Plugins dimensions jquery.dimensions.js サンプルについて、ブラウザごとの動作確認結果は Drag & Drop (Ajax JavaScript) にまとめてあります。 Drag & Drop - mootools 版Ajax JavaScript Framework の mootools 1.11 を使用して作成した、ドラッグ＆ドロップのサンプルです。 サンプルについて、ブラウザごとの動作確認結果は Drag & Drop (Ajax JavaScript) にまとめてあります。 Drag & Drop - HTML4 版記事のタイトルを、「Drag & Drop - フルスクラッチ版」から「Drag & Drop - HTML4 版」に変更しました。 （2008-09-19） Ajax JavaScript Framework を使用せずに、フルスクラッチで作成したドラッグ＆ドロップのサンプルです。 サンプルは、W3C DOM 対応ブラウザ（Firefox, Safari, Opera など） を前提として作成していますが、 DXBL（Diaspar Cross Browser Layer） を読み込むことにより、 IE (Internet Explorer) でも動作するようにしてあります。 サンプルについて、ブラウザごとの動作確認結果は Drag & Drop (Ajax JavaScript) にまとめてあります。 Drag & DropJavaScript Framework を使用して作成した、ドラッグ＆ドロップのサンプルをまとめます。 サンプルは、クイズや試験の類を想定したもので、 ドラッグ＆ドロップによる解答機能、および採点機能を実装しています。 Drag & Drop - Yahoo! UI (YUI) 版Ajax JavaScript Framework の Yahoo! UI (YUI) 2.4.1 を使用して作成した、ドラッグ＆ドロップのサンプルです。 サンプルについて、ブラウザごとの動作確認結果は Drag & Drop (Ajax JavaScript) にまとめてあります。 Drag & Drop - script.aculo.us 版Ajax JavaScript Framework の script.aculo.us 1.8.0 と、 これに同梱されている Prototype 1.6.0 を使用して作成した、ドラッグ＆ドロップのサンプルです。 サンプルについて、ブラウザごとの動作確認結果は Drag & Drop (Ajax JavaScript) にまとめてあります。 Drag & Drop - 共通ソース (CSS, HTML)ドラッグ＆ドロップのサンプルは、幾つかの異なる Ajax Javascript Framework に対して作成しています。 そして、どのサンプルのソースコードも、CSS, HTML, JavaScript の3つのパートで構成されています。 そのうち CSS と HTML についてはどのサンプルでも共通であるため、ここにまとめて掲載します。 JavaScript のソースコードについては、それぞれの Framework の記事で掲載します。 Drag & Drop - Rico 版Ajax JavaScript Framework の Rico 1.1.2 と、 これに同梱されている Prototype 1.4.0 を使用して作成した、ドラッグ＆ドロップのサンプルです。 サンプルについて、ブラウザごとの動作確認結果は Drag & Drop (Ajax JavaScript) にまとめてあります。 |
サイトの統計Powered by
|
|
Adobe Flex 3 SDK beta 2 を使用して、ドラッグ＆ドロップのデモを作成しました。
