1

こんにちは、ドラッグ アンド ドロップ機能をプロジェクトに実装しようとしていますが、いくつかの点で少し問題があります。私が抱えている問題の 1 つは、カスタム アバターの作成に関するものです。カスタム アバターを作成することはできますが、CSS でいくつかの要素を少しチートして非表示にする必要があります。

以下は、コード全体ではなく、コードのスニペットです。必要なすべてのパッケージなどが必要です。

dojo.query(".canDrag").forEach(function(node, index, nodelist){
        var createSource = new dojo.dnd.Source(
            node, {copyOnly: true, creator: createAvatar}
        );

    function createAvatar(item, hint) {
       var node       = dojo.doc.createElement("span");
       dojo.addClass(node, "avatarStyle");

        if ( hint == "avatar" ) {
            var dHtml = item; 
            console.log("trying " + dHtml);
            node.innerHTML = item;
        } 
        else {

            console.log("if this show remove redudant call");
        }

       return {node: node, data: item, type: "product", copyOnly: true};
    };

ご覧のとおり、DnD ソースを作成し、それにカスタム クリエーターを指定して、独自のカスタム アバターを構築しようとしています。実際のドラッグ可能なマークアップは次のとおりです。

<div class="canDrag panelLeft">
                        <div class="dojoDndItem" dndType="product" title="digitalCamera" id="12345">
                            <h3 class="productTitle"><a href="">Samsung ES71</a></h3>
                            <p class="productType">Compact Digital Camera</p>
                            <img src="img/small_Cam.png" class="imgLMargin" alt="Samsung ES71"/>
                            <div class="dragHandle">
                            </div>
                        </div>
                    </div>

canDrag から div 全体を追加するのではなく、画像や .product タイトルなどのさまざまな要素を取得して、それらを表示したいと思います。誰かに何かアイデアがあれば、事前に感謝します。また、私の質問が十分に明確でない場合は、言い換えてみることができます。

乾杯

4

1 に答える 1

2

CSSは問題ないはずです。それ以外の場合は、項目のdndData属性を使用するか、項目を手動で DnD ソース オブジェクトに追加できます。

クラスを使用する場合dojoDndItem、Dojo は、アバターの視覚化がマークアップ自体で既に解決されていることを期待します。そのため、内部 HTML を項目データとして渡します。これは、カスタム クリエーターを使用しない、最も単純で一般的なケースです。CSSを使ってアバターをカスタマイズするのはいいと思います。カスタム・クリエーターを使用してクラスを設定しない場合でも、 Dojo がクラス(または)avatarStyleでマークされた独自のコンテナー内にアバターを配置するという事実を利用できます。dojo/dnd/Avatar.jsのソースを見てください。dojoDndAvatardojoDndAvatarItem

それでもカスタム クリエーターを使用したい場合は、いくつかのオプションがあります。

  • dndDataアイテムに属性を追加します。その場合、それが作成者関数にitemパラメーターとして渡されます。何でもかまいません。それを使用して、アバターをさらにカスタマイズできます。例えば。JSON オブジェクトをシリアル化し、そのオブジェクトからアバターを動的に作成するか、一意の ID に設定してから、dojo.query()その下のノードにアクセスするために使用できます。

  • アイテムを完全に削除し、メソッドを使用してプログラムで追加しますinsertNodes()。その場合、クリエーター関数は、アバターのケースと実際のアイテムのケースの両方を実装する必要があります。

特にあなたの質問には対応していませんが、ここに優れたDojo DnD チュートリアルがあります。

何が起こっているのかを理解すれば、Dojo リファレンス ガイドも役に立ちます。そしてもちろんソースルークを使用！

于 2011-06-14T14:51:26.910 に答える