將標籤拖放到asp.net中的面板

Question

我知道如何在Windows應用程序中拖放，但我無法在asp:label控件中找到mousedown事件。

任何想法如何做到這一點？

Answer 1

正如John Saunders已經建議的那樣，您需要在這裏使用客戶端腳本。

我可能會建議使用jQuery-UI與某些服務器端代碼進行傳導。檢查下面的代碼：它允許拖放標籤到可拖拽控件（在本例中只有Panel1），並將該控件的id保存在標籤的子隱藏字段的值中。稍後在服務器端回發時，您需要檢查此新標籤的父級ID值，並根據需要將標籤移至新父級控制。要檢查此代碼，您需要引用jQuery和jQuery-UI庫文件。

的JavaScript：

$(function() { 
    $("#<%= Label1.ClientID %>").draggable({ revert: "invalid" }); 

    $("#<%= Panel1.ClientID %>").droppable({ 
     activeClass: "ui-state-hover", 
     hoverClass: "ui-state-active", 
     drop: function (event, ui) { 
      $(ui.draggable).css({ 
       "position": "", 
       "left": "", 
       "top": "" 
      }); 

      $("#<%= Label1Parent.ClientID %>").val(this.id); 

      $(this).append(ui.draggable); 
     } 
    }); 
}); 

標記：

<asp:Panel runat="server" ID="Panel1" Style="border: 1px solid #000; width: 300px; 
    height: 300px;"> 
</asp:Panel> 
<asp:Label runat="server" ID="Label1">Some label</asp:Label> 
<asp:HiddenField runat="server" ID="Label1Parent" /> 
<asp:Button runat="server" Text="Just some postback button" /> 

服務器端代碼：

protected void Page_Load(object sender, EventArgs e) 
{ 
    if (IsPostBack) 
    { 
     if (!string.IsNullOrEmpty(Label1Parent.Value) && Label1.Parent.ClientID != Label1Parent.Value) 
     { 
      Label1.Parent.Controls.Remove(Label1); 
      var newParent = FindControlRecursive(Page, Label1Parent.Value); 
      newParent.Controls.Add(Label1); 
     } 
    } 
} 

private static Control FindControlRecursive(Control rootControl, string clientID) 
{ 
    if (rootControl.ClientID == clientID) 
     return rootControl; 

    foreach (Control controlToSearch in rootControl.Controls) 
    { 
     var controlToReturn = FindControlRecursive(controlToSearch, clientID); 

     if (controlToReturn != null) 
      return controlToReturn; 
    } 
    return null; 
}