在博客园中看了Dflying Chen的文章使用ASP.NET Atlas实现拖放(Drag & Drop)效果(下) ,非常想实现此功能。于是下载了Dflying Chen的代码,但由于我用的是VS2008,由于版本的差异,导致不能直接使用,但在看过多篇文章后经过修改,终于实现了,我将完整代码贴出来,希望对使用VS2008 BETA2的程序员能有所帮助。
完整代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ Page language="C#" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>DragAndDrop UI Example</title>
<style type="text/css">
body, input {font-family:Verdana; font-size: 0.7em;}
.list1{ 45%; float: left}
.list2{ 45%; float: right}
.item{background:#fff;}
.itemContent{padding:5px;text-align:center;}
.itemTitle{background:#e5ecf9;font-weight:bold;cursor:move;}
.dropCue{border:dashed 1px #ff0000;}
.emptyList{text-align:center;}
</style>
</head>
<body>
<form id="form1" runat="server">
<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>
<div>
<!-- Left Area -->
<div id="leftArea" class="list1">
<div id="content1" class="item">
<div id="content1Title" class="itemTitle">Content 1</div>
<div class="itemContent">
<asp:Login ID="myLogin" runat="server"></asp:Login>
</div>
</div>
<div id="content2" class="item">
<div id="content2Title" class="itemTitle">Content 2</div>
<div class="itemContent">
Dflying's Item
</div>
</div>
</div>
<!-- Right Area -->
<div id="rightArea" class="list2">
<div id="content3" class="item">
<div id="content3Title" class="itemTitle">Content 3</div>
<div id="content3Content" class="itemContent">
<asp:Calendar ID="myCalendar" runat="server" BackColor="#FFFFCC"
BorderColor="#FFCC66" BorderWidth="1px" DayNameFormat="Shortest"
Font-Names="Verdana" Font-Size="8pt" ForeColor="#663399" Height="200px"
ShowGridLines="True" Width="220px">
<SelectedDayStyle BackColor="#CCCCFF" Font-Bold="True" />
<SelectorStyle BackColor="#FFCC66" />
<TodayDayStyle BackColor="#FFCC66" ForeColor="White" />
<OtherMonthDayStyle ForeColor="#CC9966" />
<NextPrevStyle Font-Size="9pt" ForeColor="#FFFFCC" />
<DayHeaderStyle BackColor="#FFCC66" Font-Bold="True" Height="1px" />
<TitleStyle BackColor="#990000" Font-Bold="True" Font-Size="9pt"
ForeColor="#FFFFCC" />
</asp:Calendar>
</div>
</div>
<div id="content4" class="item">
<div id="content4Title" class="itemTitle">Content 4</div>
<div id="content4Content" class="itemContent">
<asp:Image ID="Image1" runat="server" ImageUrl="http://www.nanfangdaily.com.cn/southnews/tp/jrtj/200503150657_57462.jpg" />
</div>
</div>
</div>
<div style="clear: both">
</div>
<!-- Hide template elements -->
<div style="display:none;">
<!-- DropCue Template -->
<div id="dropCueTemplate" class="dropCue">
</div>
<!-- Empty Template -->
<div id="emptyTemplate" class="emptyList">
Drop content here.
</div>
</div>
</div>
</form>
<script type="text/xml-script">
<page>
<components>
<!-- Left Area -->
<control id="leftArea">
<behaviors>
<dragDropList id="leftDragDropBehavior" dragDataType="HTML" acceptedDataTypes="'HTML'" dragMode="Move" direction="Vertical">
<dropCueTemplate>
<template layoutElement="dropCueTemplate" />
</dropCueTemplate>
<emptyTemplate>
<template layoutElement="emptyTemplate" />
</emptyTemplate>
</dragDropList>
</behaviors>
</control>
<!-- Right Area -->
<control id="rightArea">
<behaviors>
<dragDropList id="rightDragDropBehavior" dragDataType="HTML" acceptedDataTypes="'HTML'" dragMode="Move" direction="Vertical">
<dropCueTemplate>
<template layoutElement="dropCueTemplate" />
</dropCueTemplate>
<emptyTemplate>
<template layoutElement="emptyTemplate" />
</emptyTemplate>
</dragDropList>
</behaviors>
</control>
<!-- Draggable items -->
<control id="content1">
<behaviors>
<draggableListItem handle="content1Title" />
</behaviors>
</control>
<control id="content2">
<behaviors>
<draggableListItem handle="content2Title" />
</behaviors>
</control>
<control id="content3">
<behaviors>
<draggableListItem handle="content3Title" />
</behaviors>
</control>
<control id="content4">
<behaviors>
<draggableListItem handle="content4Title" />
</behaviors>
</control>
</components>
</page>
</script>
</body>
</html>
<%@ Page language="C#" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>DragAndDrop UI Example</title>
<style type="text/css">
body, input {font-family:Verdana; font-size: 0.7em;}
.list1{ 45%; float: left}
.list2{ 45%; float: right}
.item{background:#fff;}
.itemContent{padding:5px;text-align:center;}
.itemTitle{background:#e5ecf9;font-weight:bold;cursor:move;}
.dropCue{border:dashed 1px #ff0000;}
.emptyList{text-align:center;}
</style>
</head>
<body>
<form id="form1" runat="server">
<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>
<div>
<!-- Left Area -->
<div id="leftArea" class="list1">
<div id="content1" class="item">
<div id="content1Title" class="itemTitle">Content 1</div>
<div class="itemContent">
<asp:Login ID="myLogin" runat="server"></asp:Login>
</div>
</div>
<div id="content2" class="item">
<div id="content2Title" class="itemTitle">Content 2</div>
<div class="itemContent">
Dflying's Item
</div>
</div>
</div>
<!-- Right Area -->
<div id="rightArea" class="list2">
<div id="content3" class="item">
<div id="content3Title" class="itemTitle">Content 3</div>
<div id="content3Content" class="itemContent">
<asp:Calendar ID="myCalendar" runat="server" BackColor="#FFFFCC"
BorderColor="#FFCC66" BorderWidth="1px" DayNameFormat="Shortest"
Font-Names="Verdana" Font-Size="8pt" ForeColor="#663399" Height="200px"
ShowGridLines="True" Width="220px">
<SelectedDayStyle BackColor="#CCCCFF" Font-Bold="True" />
<SelectorStyle BackColor="#FFCC66" />
<TodayDayStyle BackColor="#FFCC66" ForeColor="White" />
<OtherMonthDayStyle ForeColor="#CC9966" />
<NextPrevStyle Font-Size="9pt" ForeColor="#FFFFCC" />
<DayHeaderStyle BackColor="#FFCC66" Font-Bold="True" Height="1px" />
<TitleStyle BackColor="#990000" Font-Bold="True" Font-Size="9pt"
ForeColor="#FFFFCC" />
</asp:Calendar>
</div>
</div>
<div id="content4" class="item">
<div id="content4Title" class="itemTitle">Content 4</div>
<div id="content4Content" class="itemContent">
<asp:Image ID="Image1" runat="server" ImageUrl="http://www.nanfangdaily.com.cn/southnews/tp/jrtj/200503150657_57462.jpg" />
</div>
</div>
</div>
<div style="clear: both">
</div>
<!-- Hide template elements -->
<div style="display:none;">
<!-- DropCue Template -->
<div id="dropCueTemplate" class="dropCue">
</div>
<!-- Empty Template -->
<div id="emptyTemplate" class="emptyList">
Drop content here.
</div>
</div>
</div>
</form>
<script type="text/xml-script">
<page>
<components>
<!-- Left Area -->
<control id="leftArea">
<behaviors>
<dragDropList id="leftDragDropBehavior" dragDataType="HTML" acceptedDataTypes="'HTML'" dragMode="Move" direction="Vertical">
<dropCueTemplate>
<template layoutElement="dropCueTemplate" />
</dropCueTemplate>
<emptyTemplate>
<template layoutElement="emptyTemplate" />
</emptyTemplate>
</dragDropList>
</behaviors>
</control>
<!-- Right Area -->
<control id="rightArea">
<behaviors>
<dragDropList id="rightDragDropBehavior" dragDataType="HTML" acceptedDataTypes="'HTML'" dragMode="Move" direction="Vertical">
<dropCueTemplate>
<template layoutElement="dropCueTemplate" />
</dropCueTemplate>
<emptyTemplate>
<template layoutElement="emptyTemplate" />
</emptyTemplate>
</dragDropList>
</behaviors>
</control>
<!-- Draggable items -->
<control id="content1">
<behaviors>
<draggableListItem handle="content1Title" />
</behaviors>
</control>
<control id="content2">
<behaviors>
<draggableListItem handle="content2Title" />
</behaviors>
</control>
<control id="content3">
<behaviors>
<draggableListItem handle="content3Title" />
</behaviors>
</control>
<control id="content4">
<behaviors>
<draggableListItem handle="content4Title" />
</behaviors>
</control>
</components>
</page>
</script>
</body>
</html>
特别说明的是,还在编写此代码前,一定要到http://ajax.asp.net下载ASP.NET AJAX Futures进行安装,安装成功后会发现VS2008中多出了很多的控件,再运行此代码就可以正常运行。
如果不能正常运行的,请留言,我们一起解决!!!