2

わかりました、これは長いものの 1 つです。

ID とフィールドを格納する値のテーブルがあります。

<asp:DataGrid runat="server" ID="dgFields" AutoGenerateColumns="false">
   <Columns>
        <asp:BoundColumn DataField="ID" Visible="true" HeaderText="ID"></asp:BoundColumn>
        <asp:BoundColumn ItemStyle-CssClass="draggable" DataField="Name" HeaderText="Field">
         </asp:BoundColumn>
    </Columns>
</asp:DataGrid>

これは正しくバインドされ、データはテーブルに正しく配置されます。フィールドにバインドされた列のみが「ドラッグ可能」であることに注意してください。また、ドラッグが正常に機能することにも注意してください。

今、テーブルから値をドラッグアンドドロップできるようにしたいテキストボックスがあります。素敵でシンプル -

<asp:TextBox ID="txtNode" runat="server" class="droppable"></asp:TextBox>

今楽しい部分:)

$j(".draggable").draggable({ helper: 'clone', opacity: 0.7, cursor: 'move' });

これはうまくいきます。

今トリック。IDとフィールドを覚えておいてください。フィールドをドラッグしたいのですが、テキストボックスにIDを追加したいです。これでうまくいきました。IEでテスト。しかし、今日、私はそれをFirefoxで開き、テキストボックスに「未定義」が表示され始めたときの完全な恐怖を想像してください。

スピードのために（別名、今すぐ動作させるため）、ドロップ可能なものを変更したところ、次のようになりました。

$j(".droppable").droppable({
                accept: '.draggable',
                activeClass: 'ui-state-hover',
                hoverClass: 'ui-state-active',
                drop: function(event, ui) {
                    var tbox = document.getElementById('txtNode');


                    //IE works with the following code
                    var id = ui.draggable[0].previousSibling.innerText;
                    //returns null for FIREFOX
                    if (id == null) {
                        //FIREFOX works with this
                        id = ui.draggable[0].previousElementSibling.innerHTML
                    }

                    tbox.value = tbox.value + '{' + id + '}';

                }
            });

ノート。「tbox.value = ...」ビットは、テキストボックスにドラッグされたすべての ID で構成される文字列を作成したいためです。ユーザーエクスペリエンスのために、IDではなくユーザーフレンドリーなフィールド名をドラッグしてもらいたいので、兄弟を取得する必要があります（IDはユーザーにとって意味がないためです-表示される唯一の理由は、ユーザーがマップできるようにするためですテキストボックス内の id を単語にドラッグした後)。さらなる背景として、ID文字列はxmlファイルに保存され、構成やその他の魔法のようなものに使用されます:)

だから今質問

  1. これは既知のバグですか、それとも完全に間違っていますか?
  2. それが問題である場合、これが最善の方法ですか、それともそれを修正するためのより良い方法はありますか?

もう一度注意してください - ここのコードはすべて動作します。これは、私が現在持っているものに対する最善のアプローチ方法です。これは確かに回避策です。

4

1 に答える 1

1

ここでの問題は、FirefoxとIEのDOM実装間の非互換性です。jQueryは、開発者があなたがしなければならなかったことを避けられるようにすることを目的としています。コードをテストすることはできませんが（要素を設定するためのサーバー側のビジネスロジックがすべて揃っていないため）、次のことを試してみてください。基本的には、DOM呼び出しをjQueryのAPIに置き換える必要があります。どうぞ....

交換：

var id = ui.draggable[0].previousSibling.innerText;
//returns null for FIREFOX
if (id == null) {
  //FIREFOX works with this
  id = ui.draggable[0].previousElementSibling.innerHTML
}

と：

var id = ui.draggable.prev().html();

jQuery APIの詳細については、jQueryAPIを参照してください。具体的には、prev（）とhtml（）の呼び出しは、それぞれTraversingとAttributesから発生します。

私が助けてくれることを願っています！

スティーブン

于 2009-11-25T17:07:50.667 に答える