人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

AJAXのDrag&Dropのやり方を教えてください。

やりたいことは、ある画像をドラッグして、特定の枠内にドロップしたら、そこに留まり(枠にしっかり収まるようにする)、枠外であれば元の場所に戻るようにしたいです。以下サイトが、それを実現しているのですが、
ソースの理解が全然できないため質問しました。
http://diaspar.jp/node/43

わからないこと
1.ソース一式ダウンロードして実行したところ、エラーが発生。

(158行目)
Droppables is not defined
[Break on this error] Droppables.add(drop, optDropzone);

prototype.jsの行592でエラーになっている。
587 var Enumerable = {
588 each: function(iterator, context) {
589 var index = 0;
590 iterator = iterator.bind(context);
591 try {
592 this._each(function(value) {

2.

JavaScript部分の最初に「(function() {」とあるがこれは何を意味するか?

//<![CDATA[
(function() {

すみません。JavaScriptの基本的な部分は理解しているつもりですが、
(例えば、http://220.221.186.61/htm/book3.htm にあるサンプルのソースは理解できます。)
このソースは、それぞれ何をしているか理解できません。(例えば、「var optDropzone = {」、「var optDraggable = {」、「document.observe('dom:loaded', function() {」)
参考サイト等、ご教授頂けると幸いです。

●質問者: nemutaiyo
●カテゴリ:インターネット ウェブ制作
✍キーワード:ADD Ajax BIND CDATA DOM
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● susie-t
●60ポイント

> 1.ソース一式ダウンロードして実行したところ、エラーが発生。

当方ではできました。

156、157行目のスクリプトファイル読み込み設定が間違っていませんか? 記事のときとはバージョンが変わっていますのでそのあたりもチェックしてください。

> 2.JavaScript部分の最初に「(function() {」とあるがこれは何を意味するか?

「function(){}」は無名関数と呼ばれるものです。関数そのものをすぐに変数等に格納したり、返却したりする場合、名前をつけなくてもOKです。

また、

 (funstion(){
 //コード
 }());

は以下と同じです。

 funstion test(){
 //コード
 }
 test();

前者は関数を定義と同時に実行してます。

この場合も無名関数でOKです。

サンプルだと211行目が関数の終わり+実行です。

このソースはprototype.js + script.aculo.usフレームワークを使用していますので

ソースの理解にはJavaScriptの基本に加え、各フレームワークの知識が必要となります。

http://www.openspc2.org/JavaScript/Ajax/ref/prototype.js/

http://www.openspc2.org/JavaScript/Ajax/ref/script.aculo.us/

prototype.jsは私も旧バージョン(1.4.0)の解読記録をブログに載せましたが

http://d.hatena.ne.jp/susie-t/archive?word=%2a%5bprototype%2ejs%...

最新バージョンは使い方すら追えてないです・・・。

参考になれば幸いです。

◎質問者からの返答

>記事のときとはバージョンが変わっていますのでそのあたりもチェックしてください。

記事と同じバージョンのPrototype.js & script.aculo.us をセットしたらできました。ありがとうございます!!

(バージョンが少し違うだけで動かない場合があるのですね。勉強になりました。)

>「function(){}」は無名関数と呼ばれるものです。関数そのものをすぐに変数等に格納したり、返却したりする場合、名前をつけなくてもOKです。

理解しました。コード比較を書いて頂き感謝します。

教えて頂いたことを手がかりに、コード全体を理解できるように調べます。また質問するかもしれませんが、よろしくお願いします。

---------

(追記)

function test(){

//コード

}

test();

上記形式に変更しても問題なく動きました。

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ