Question

我有一个Container，其中我有一个可以使用Asp.Net文本框控件拖动的div元素。还有两个用于关闭和拖动的图像按钮。

现在，当我点击容器时，可以使用文本框控件拖动的div应该附加到容器的（0,0）位置，当我单击关闭按钮时，它应该关闭。

这是我所拥有的，有些人建议我在上一个问题中进一步提出好的想法

Adding and remove div on click using jquery

我处于两难境地，如何将文本框控件添加到可拖动的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控件，它工作正常，所以我没有看到你的代码，只是你的部署有任何问题。

使用jquery切换div及其子元素

1 个答案: