2012-01-20 4 views
0

これはjQueryのの私の現在の流れです:jQueryオブジェクトのデザイン

  1. オブジェクトが作成されます。
  2. オブジェクトには、HTML表現を含む文字列を返すdraw()という関数があります。
  3. コンテナが作成されました。
  4. コンテナにも同じことをするdraw()関数があります。
  5. オブジェクトとコンテナは、両方とも$( '。class')。append(...)を使用して2つの別々のdivに描画されます。
  6. オブジェクトのdivはドラッグ可能になり、コンテナのdivは削除可能になります。

上記は機能します。しかし、以下は私がつまずくところです:

コンテナコンテナにはオブジェクトの配列が含まれています。ユーザーがObject divをContainer divにドロップすると、そのObjectをContainer配列に追加したいと考えています。

各オブジェクトに一意のIDを追加し、そのIDでオブジェクトdivを作成し、一意のコンテナIDを持つコンテナdivにオブジェクトをドロップし、両方のIDでルックアップを実行する唯一のオプションはありますか?

EDIT:わかったかもしれませんが、多分私は少し上手くそれを抽象化することができます。

私はトレーディングカードとカードパックを画面に表示しています。トレーディングカードは小さな四角い箱でモンスターの絵があり、カードパックは小さい灰色の箱です。トレーディングカードをカードパックにドロップすると、トレーディングカードが消え、カードパック内にトレーディングカードの小さな画像が置かれます。

各カードパックにはトレーディングカードのコンテナがあります。各オブジェクトTradingCardとCardPackには、そのオブジェクトの描画方法を表すHTML文字列を作成する.draw()メソッドがあります。次に、その文字列をJQueryを使用して画面上の任意のオブジェクトに追加できます。今

、戻って私の最初の記事に関連する:

TradingCardはドラッグ可能で、かつCardPackはドロップ可能です。 TradingCardをCardPackにドロップすると、JQueryのdroppable内の関数が呼び出されます。私は、その関数がそのTradingCardをCardPackの配列に追加したいと思う。

+1

私は基本的なロジックに従うと思うjsfiddleはコードの理解を助けるでしょう。 – davidethell

+0

「コンテナコンテナには脳の凍結が含まれています。 –

+0

クラップス、私には明らかな問題を提起するのはひどいです。 A - > HTMLA; B - > HTMLB; HTMLAをHTMLBにドラッグします。 ...? AをBの配列に追加します。 – sdasdadas

答えて

1

私は完全にあなたを以下てるかどうかはわからないんだけど、このようなものは、私はあなたの質問を理解することができますよう最善のように、動作するはずです:あなたはこのように、それらを使用することができるように

// [object] has this general structure 
var obj = { 
    draw : function() { 
     return $('<p></p>'); 
    } 
}; 

// [container] has this general structure 
var container = { 
    objects : [], 
    draw : function() { 
     var el = $('<div></div>'); 
     $.each(this.objects, function (v,i) { 
      el.append(v.draw()); 
     }); 

     return el; 
    } 
}; 

を:

// where foo and bar are [object]s 
container.objects.push(foo); 
container.objects.push(bar); 

$('#main').append(container.draw()); 

しかし、ここでも私はあなたを誤解しているかもしれません。 (!笑)

+0

はい、あなたは私を理解しました(成功?)。しかし、実際にコンテナにobjをドロップすると(JSのオブジェクトではなくJQueryオブジェクトを削除しているので)、そのコードは私の問題につながります。 – sdasdadas

+0

プレーンなJSオブジェクトの代わりにjQueryオブジェクトを使用する際の問題は何ですか? jQueryオブジェクトはJSオブジェクトでもありますので、上記で詳しく説明したことを行うことができます。問題はjQueryオブジェクト自体に新しい機能を追加することです。 '$ .extend()'の使用や '$ .fn.draw = function(){}'のような新しいラッパーメソッドの作成など、さまざまな方法でこれを行うことができます。 –

+0

しかし、 '

'タグにelをドロップすると、container1.objects [0] = obj1をどのように呼び出すのですか? – sdasdadas

1

私はovercomplicatedlyある質問を理解していると思うが...

ショートAsnswerを述べた:はい。

説明では、配列内の項目にインデックスでアクセスすることも、IDで指定することもできます。インデックスの問題は、アイテムが追加される(および削除されると、場所を管理する必要があるということですか?)おそらく別の構造の2つの構造の外側で管理することができますが、それはより多くの不必要な複雑さを追加しています。

「オブジェクト」をコンテナにドロップして個別にコンテナにアクセスすることはできますが、親子関係の階層がない限り、どのコンテナにアクセスするのかはどのように分かりますか?それから、コンテナからアイテムを読んでいる限り、彼らは間違いなく「ドロップ」された順番になりますが、「落とした」ものが分からない限り、どのアイテムが推測できるのでしょうか?これは..

"droppable"(笑)オブジェクトのコンテンツを知っていれば、そのコンテンツは一意のID /コンテンツ(コンテンツが別個であると仮定して)になります。彼らのコンテンツも

...ああ、私の投稿を読んだ後、私はいくつかの明確化を提供して欲しいと思う..私はあなたが達成しようとしていたものをレイアウトすれば、このアプローチを取って..

関連する問題