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() {」)
参考サイト等、ご教授頂けると幸いです。

回答の条件
  • 1人10回まで
  • 登録:2008/10/13 00:53:37
  • 終了:2008/10/20 00:55:02

回答(1件)

id:susie-t No.1

susie-t回答回数99ベストアンサー獲得回数182008/10/13 23:27:31

ポイント60pt

> 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%...

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

参考になれば幸いです。

id:nemutaiyo

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

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

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

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

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

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

---------

(追記)

function test(){

//コード

}

test();

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

2008/10/14 21:42:23
  • id:susie-t
    すみません、回答した後に気がついたのですが
    Prototype.js & script.aculo.us はご存知なんですね。
    (質問のリンク先をよく見てませんでした。)
    失礼しました。

    余談ですが、なぜ無名関数即時実行をしているかというと、
    グローバル変数を無駄に増やしたくないからだと思います。

    他の部分はscript.aculo.usの仕様に基づくと思われますが、
    詳細については紹介しましたリファレンス以上のことは現在私も知識がないです。
    申し訳ないです。

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません