0

div ブロックをドラッグ可能にしたいのですが、動作しますが、div ブロックに runat="server" 属性を使用すると、visible="false" 属性を使用できますが、ドラッグ可能を使用できません。

ここに私のコード：

<script>

        $(function () {
            $("#draggablebox").draggable();
        });


       </script>

<div class="create_box" id="draggablebox" runat="server" visible="false">
          ...
        </div>

ASP.Net でこれを行うにはどうすればよいですか?

4

2 に答える 2

3

を使用する場合runat="server" visible="false"、それはサーバー側の属性であり、要素はクライアントにまったく送信されません。style="display: none;"代わりに使用してみてください。これにより、div がクライアントにレンダリングされますが、非表示になります。

runat="server"それ自体では何もしないことに 注意してください。<div runat="server"></div>は と同じものをクライアントに送り返します<div></div>。サーバー属性の追加を開始するとrunat="server"、ASP.Net がレンダリングされるものの変更を開始します ( visible="false".

于 2012-11-29T07:22:33.583 に答える
1

display:none は要素をブラウザーに表示しませんが、HTML をブラウザーに出力し、ブラウザーのレンダリングに依存して要素を表示するかどうかを選択します。これにより、ページの読み込みと CSS の適用の間に遅延がある場合、要素が画面上で「ちらつく」ことがあります。

元の質問への回答として、runat を使用している場合、どのように要素にドラッグ可能を適用できますか?

オプション 1: ドラッグ可能なサーバー側を設定できます。

draggable.Attributes["draggable"] = "true"

これは（あなたの例から）出力されます：

<div class="create_box" id="draggablebox" runat="server" visible="false" draggable="true">
...
</div>

HTML5 で要素をドラッグ可能にする - jQuery オプションが行っているのと同じ。

オプション 2: 別のセレクターを使用して jQuery で設定します。

現在、ID に基づいて選択していますが、コントロールはサーバー側のコントロールであるため、設定した ID であり、ブラウザーに出力するものではありません。ID はサーバー側のコントロール ID になっています。

コントロールに CSS クラスを与え、代わりにこれを使用して要素を選択できます。

<script>

$(function () {
    $(".draggablebox").draggable();
});

</script>

<div class="create_box" id="draggablebox" class="draggablebox" runat="server" visible="false">
      ...
</div>

オプション 3:クライアント側スクリプトで正しい ID を指定する

ASPX ページで、正しい「ClientID」を使用するように出力 JavaScript を変更できます。下記参照：

<script>

$(function () {
    $('<%= draggablebox.ClientID %>').draggable();
});

</script>

<div class="create_box" id="draggablebox" class="draggablebox" runat="server" visible="false">
      ...
</div>

これが役立つことを願っています！

カート

于 2013-05-26T19:49:29.127 に答える