如何在ASP.NET中实现拖放Drag and drop
2009-10-06 10:28
716 查看
最近要在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;
}
在网上读了读别人的例子，自己也试着编了一个。
这个功能要用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;
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- ASP.NET AJAX (Atlas) 拖放（Drag & Drop）功能6种实现方法总结
- ASP.NET AJAX (Atlas) 拖放（Drag & Drop）功能6种实现方法总结
- ASP.NET Atlas实现网站模块（版块）拖放（Drag &amp; Drop）效果
- 使用ASP.NET Atlas实现拖放（Drag & Drop）效果
- 使用ASP.NET Atlas实现拖放（Drag & Drop）效果（下）
- ASP.NET Atlas实现网站模块（版块）拖放（Drag & Drop）效果
- [转]ASP.NET AJAX (Atlas) 拖放（Drag & Drop）功能6种实现方法总结
- 使用ASP.NET Atlas实现拖放（Drag & Drop）效果（上）
- ExtJS+ASP.NET实现Tree节点的拖动(DragDrop)
- ASP.NET AJAX Drag And Drop
- HTML5+CSS3实现拖放(Drag and Drop)示例
- ASP.NET Ajax Drag and Drop Table Columns Extender Control/拖拽表列
- Easyui 在dialog中加载datagrid，并实现可拖放行(drag and drop rows)
- ExtJS+ASP.NET实现Grid到Tree的拖动(DragDrop)
- flex 图片拖放的实现(drag and drop)
- ASP.NET AJAX Drag And Drop
- ASP.NET Ajax Drag and Drop Table Columns Extender Control/拖拽表列
- Custom Client Side Drag and Drop Behavior in ASP.NET AJAX
- Android 用户界面---拖放（Drag and Drop）（一）
- 如何在ASP.NET站点中实现对用户请求的监控