Как сделать asp: панель перетаскиваемой без использования AjaxControlToolKit - PullRequest
Новая
       45

Как сделать asp: панель перетаскиваемой без использования AjaxControlToolKit

0 голосов
/ 10 февраля 2011

OnClick загружаем пользовательский контроль в asp: панель. Это отлично работает. Это выглядит как модальное всплывающее окно. Вопрос (а я выглядел высоко и низко), есть ли способ сделать это "перетаскиваемым"?

Единственное, что я нашел, это используя:

http://www.asp.net/ajax/ajaxcontroltoolkit/Samples/DragPanel/DragPanel.aspx

Я бы предпочел не включать ajaxcontroltoolkit.

Моя кнопка Image: 

<asp:ImageButton ID="btnOpenBox" ImageUrl="~/images/open.gif" runat="server"
 OnClick="btnOpenBox_Click" />

Модальная всплывающая панель: 

 <asp:Panel ID="pnlMyModalBox" runat="server" Visible="false" HorizontalAlign="Left"
        Style="position: absolute; left: 75px; z-index: 50000; top: 100px;">
        <uc1:MyUserControl ID="mdMyUserControl" runat="server" Visible="false" />
    </asp:Panel>

Кодовое обозначение: 

 protected void btnOpenBox_Click(object sender, ImageClickEventArgs e)
        {
            System.Web.UI.HtmlControls.HtmlGenericControl _body = (System.Web.UI.HtmlControls.HtmlGenericControl)this.Page.Controls[0].FindControl("Body1");
            _body.Attributes.Add("class", "modalBackground");
            mdJournalEntry.Visible = true;
            pnlBody.Enabled = false;

            pnlMyModalBox.Visible = true;
            pnlMyModalBox.Height = Unit.Pixel(350);
            pnlMyModalBox.Width = Unit.Pixel(800);
        }

Ответы [ 3 ]

1 голос
/ 10 февраля 2011

Я использовал jquery с отличными результатами.

Это официальная ссылка с парой отличных примеров http://jqueryui.com/demos/draggable/

Там вы найдете все, что вам нужно

ПРАВКА

Загрузите пользовательский интерфейс jquery и включите следующие файлы в свой проект и этот код на странице 

<script src="../../jquery-1.4.4.js"></script>
<script src="../../ui/jquery.ui.core.js"></script>
<script src="../../ui/jquery.ui.widget.js"></script>
<script src="../../ui/jquery.ui.mouse.js"></script>
<script src="../../ui/jquery.ui.draggable.js"></script>
//These include tags have to be in this exact order because the lower one depend on the first ones 
<script type="text/javascript">
$(document).ready(function() {
    dragAndDrop();
    Sys.WebForms.PageRequestManager.getInstance().add_endRequest(dragAndDrop); 
    //this makes the javascript method execute after an ajax action on the page
});

function dragAndDrop() {
    $( ".draggable" ).draggable();
}
</script>

Теперь просто добавьте класс в свою панель, как этот 

<asp:Panel ID="pnlMyModalBox" runat="server" class="draggable" Visible="false" HorizontalAlign="Left"
        Style="position: absolute; left: 75px; z-index: 50000; top: 100px;">
        <uc1:MyUserControl ID="mdMyUserControl" runat="server" Visible="false" />
    </asp:Panel>

Если все сделано правильно, оно должно работать

0 голосов
/ 10 февраля 2011

Добавьте это к голове (извините, вам нужно выполнить поиск для функции $ asp .. очень полезно!): 

<script type="text/javascript">
    $(document).ready(function() {
            $asp("pnlMyModalBox").draggable();
    });
        </script>


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>    
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>

Надеюсь, это поможет кому-то еще.

0 голосов
/ 10 февраля 2011

Сделать панель (визуализируемой как div) перетаскиваемой можно только в JavaScript. Так что проверьте jQuery или Prototype / Scriptacolous или какую-нибудь другую библиотеку JavaScript. Они поддерживают этот вид операций

...