如何在ASP.NET中实现拖放Drag and drop

最近要在ASP.NET中实现拖放功能，一般来说，不少控件提供商都有类似的控件，如ComponentArt，Yahoo等等。我发现Microsoft其实一两年前就有类似的工具了。不过Microsoft的工具除了最基本的之外向来不好看，也不太好用。

在网上读了读别人的例子，自己也试着编了一个。

 

这个功能要用Microsoft.Web.Preview.dll。可以从ASP.NET网上下载到说明和文件。

Javascript代码是要从Browser中读出被拖放的控件的位置。在Browser中的控件的位置Server端是读不到的。我用Javascript读出控件的ID，放入一个Hidden Field里，在由Server端的代码处理。

注意<script type="text/xml-script">中的代码，这是核心所在。

 

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="WebApplication1.WebForm2" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title></title>
    <script language="javascript" type="text/javascript">
      function aa() {
        var idString="";
        var i;
        var Panel1 = document.getElementById("Panel1") ;
        var Panel2 = document.getElementById("Panel2") ;
        for (i = 0; i < Panel1.children.length; i++) {
          if (Panel1.children[i].children.length > 0) {
            idString += Panel1.children[i].children[0].id + ";";
          }
        }
        document.getElementById("TextBox1").value = idString;
        idString = "";
        for (i = 0; i < Panel2.children.length; i++) {
          if (Panel2.children[i].children.length > 0) {
            idString += Panel2.children[i].children[0].id + ";";
          }
        }
        document.getElementById("TextBox2").value = idString;

        return true;
      }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
   
    <asp:ScriptManager ID="scriptManager" runat="server">
        <Scripts>
            <asp:ScriptReference Assembly="Microsoft.Web.Preview" Name="PreviewScript.js" />
            <asp:ScriptReference Assembly="Microsoft.Web.Preview" Name="PreviewDragDrop.js" />
        </Scripts>
    </asp:ScriptManager>
   
      <table style="width:100%;">
        <tr>
          <td>
            <asp:Panel ID="Panel1" runat="server" BorderStyle="Solid" BorderWidth="1px"
              Height="100px" Width="100px">
              <asp:Panel ID="Handler1" runat="server">
                <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
              </asp:Panel>
            </asp:Panel>
          </td>
          <td>
            <asp:Panel ID="Panel2" runat="server" Height="100px" Width="100px" BorderStyle="Solid" BorderWidth="1">
              <asp:Panel ID="Handler2" runat="server">
              <asp:Button ID="Button1" runat="server" Text="Button" />
              </asp:Panel>
            </asp:Panel>
          </td>
        </tr>
       </table>
   
         <div class="templates">
          <%-- Drop Cue template --%>
          <div id="dropCueTemplate" class="dropCue" runat="server"></div>
          <%-- Empty template --%>
          <div id="emptyTemplate" class="emptyList" runat="server"></div>
        </div>
      <asp:Button ID="Save" runat="server" Text="Button" onclick="Button2_Click" OnClientClick="return aa();"/>
      <input id="TextBox1"  type="hidden" runat="server"/>
      <input id="TextBox2"  type="hidden" runat="server"/>
      <br />
      <asp:Label ID="Label2" runat="server" Text="Label"></asp:Label><br />
      <asp:Label ID="Label3" runat="server" Text="Label"></asp:Label>
    </div>
    </form>
   
   <script type="text/xml-script">
   <page>
   <components>
         <control id="Panel1">
          <behaviors>
              <dragDropList dragDataType="HTML"
                            acceptedDataTypes="'HTML'"
                            dragMode="Move"
                            direction="Vertical">
                  <dropCueTemplate>
                      <template layoutElement="dropCueTemplate" />
                  </dropCueTemplate>
                  <emptyTemplate>
                      <template layoutElement="emptyTemplate" />
                  </emptyTemplate>
              </dragDropList>
          </behaviors>
      </control>
     
        <control id="Panel2">
              <behaviors>
                  <dragDropList dragDataType="HTML"
                                acceptedDataTypes="'HTML'"
                                dragMode="Move"
                                direction="Vertical">
                      <dropCueTemplate>
                          <template layoutElement="dropCueTemplate" />
                      </dropCueTemplate>
                      <emptyTemplate>
                          <template layoutElement="emptyTemplate" />
                      </emptyTemplate>
                  </dragDropList>
              </behaviors>
          </control>

        <control id="Handler1">
            <behaviors>
                <draggableListItem handle="Handler1" />
            </behaviors>
        </control>
        <control id="Handler2">
            <behaviors>
                <draggableListItem handle="Handler2" />
            </behaviors>
        </control>

   </components>
   </page>
   </script>

</body>
</html>

 

 

Code Behind：

    protected void Button2_Click(object sender, EventArgs e)
    {
      this.Label2.Text = this.TextBox1.Value;
      this.Label3.Text = this.TextBox2.Value;

    }