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

最新推荐文章于 2023-03-16 22:56:14 发布

萝卜

最新推荐文章于 2023-03-16 22:56:14 发布

阅读量1k

点赞数

分类专栏： .NET 文章标签： asp.net server textbox asp button microsoft

本文链接：https://blog.csdn.net/liberwang/article/details/4635489

版权

.NET 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

最近要在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" οnclick="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>

   </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;

}

萝卜

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
如何在ASP.NET中实现拖放Drag and drop

最近要在ASP.NET中实现拖放功能，一般来说，不少控件提供商都有类似的控件，如ComponentArt，Yahoo等等。我发现Microsoft其实一两年前就有类似的工具了。不过Microsoft的工具除了最基本的之外向来不好看，也不太好用。在网上读了读别人的例子，自己也试着编了一个。这个功能要用Microsoft.Web.Preview.dll。可以从ASP.NET网上下载到说明
复制链接

扫一扫