0
我有一個Container，其中有一個可拖動的Asp.Net文本框控件的div元素。還有兩個圖像按鈕用於關閉和拖動。使用jquery切換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;
}