使用jQuery切換div及其子元素

Question

我有一個容器，其中有一個div元素，可以使用Asp.Net文本框控件進行拖動。還有兩個用於關閉和拖動的圖像按鈕。

現在，當我單擊容器時，可以使用文本框控件拖動的div應該附加到容器的（0,0）位置，並且當我單擊關閉按鈕時，它應該關閉。

這是我所擁有的，有些人向我建議了一些好主意，以便在我在此處提出的上一個問題中進一步

使用jQuery單擊添加和刪除div

我在如何將文本框控件添加到可拖動div中以顯示它是服務器端控件方面處於困境。

這就是我現在所擁有的： http : //jsfiddle.net/v8x4P/7/

這是代碼：

 <div id="content" style="background-color: #E5E5E5; width: 500px; height: 500px;">
    <div class="demo" style="border-style: dashed; background-color: #CCCCCC">
        <asp:TextBox ID="TextBox1" runat="server" BackColor="Transparent" BorderStyle="None"
            autocomplete="off" TextMode="MultiLine"></asp:TextBox>
        <div class="left" style="cursor: move">
        </div>
        <div class="right" style="cursor: nw-resize">
        </div>
    </div>
</div>

腳本：

$(function () {

        $('.demo').draggable({

            containment: '#content',

            cursor: 'move',

            snap: '#content',

            stop: function () {

                var offset = $(this).offset();

                var xPos = offset.left;

                var yPos = offset.top;

                $('#posX').text('X: ' + xPos);

                $('#posY').text('Y: ' + yPos);
           }
        })

.resizable();

$('.demo').hover(

function () {

$(this).addClass('hoveredon');

},

function () {

    $(this).removeClass('hoveredon').addclass('hoveredoff');

    }
  );
  });

CSS：

   #TextBox1

        {

            width: 100%;

            height: 100%; /* make the element resize */

        }

        .demo

        {

            width: 150px;

            height: 150px;

            padding: 5px 10px 10px 4px; /* updated padding to make things look better */    
            background-color: #ff8811;

            position: absolute;

            top: 150px;

            left: 300px;

            filter: alpha(opacity=30);

            -moz-opacity: 0.3;

            opacity: 0.3;
            }


        .hoveredon

        {

            filter: alpha(opacity=100);

            -moz-opacity: 1.0;

            opacity: 1.0;

            border-color: blue;

        }





        .hoveredoff

        {

            filter: alpha(opacity=30);

            -moz-opacity: 0.3;

            opacity: 0.3;

            border-color: silver;

        }



        .demo .left

        {

            content: '';

            position: absolute;

            height: 30px;

            width: 30px;

            top: -16px;

            left: -16px;

            background-image: url(http://dummyimage.com/30x30/000/fff&text=close);

            background-repeat: no-repeat;

        }

        .demo .right

        {

            position: absolute;

            height: 30px;

            width: 30px;

            bottom: -10px;

            right: -10px;

            background-image: url(http://dummyimage.com/30x30/000/fff&text=drag);

            background-repeat: no-repeat;

        }

        *:focus

        {

            outline: none;

        }

Answer 1

在這里很難看到問題。 顯然，jsfiddle.net不知道如何處理服務器端控件，因此ASP.NET TextBox不會呈現為輸入元素。 但這將在生產環境中進行。 如果我用標准HTML INPUT元素替換您的TextBox控件，那么它可以正常工作，因此我看不到您的代碼有任何問題，只是您的部署沒有問題。