Ayman Farouk

Microsoft Maniac Guy ..!
posts - 33, comments - 66, trackbacks - 59

My Links

News

Archives

Blogroll

Links

Time to Drag and Drop

I was exploring the Atlas stuff. I liked the Drag and Drop feature, here is a small thing about it ..

<%@ Page Language="VB" %>

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

<script runat="server">

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs)

End Sub

</script>

<html xmlns="http://www.w3.org/1999/xhtml" >

<head runat="server">

<title>Atlas Drag and Drop Demo</title>

<atlas:ScriptManager ID="scriptManager" runat="server">

<Scripts>

<atlas:ScriptReference Path="ScriptLibrary/Atlas/Debug/AtlasUIDragDrop.js" />

</Scripts>

</atlas:ScriptManager>

<style type="text/css">

body{font-family:Verdana;font-size:11px;}

.boxHandler{height:15px;background:#ffffff;overflow:hidden;

border-bottom:solid 1px #cccccc;font-weight:bold;

cursor:move;}

.dropCueTemp{border:dotted 1px #000000;margin-bottom:5px;background:#cccccc}

.emptyTemp{font-weight:bold;text-align:center;}

.templates{visibility:hidden;}

</style>

</head>

<body>

<form id="form1" runat="server">

<div id="MySite">

<div id="DragPlace1" >

<div id="Box1">

<div id="BoxHandler1" class="boxHandler" >This is the Box Handler</div>

<div id="BoxBody1" >

<asp:Login runat="server" ID="Login1" BackColor="#E3EAEB" BorderColor="#E6E2D8" BorderPadding="4" BorderStyle="Solid" BorderWidth="1px" Font-Names="Verdana" Font-Size="0.8em" ForeColor="#333333" TextLayout="TextOnTop">

<TitleTextStyle BackColor="#1C5E55" Font-Bold="True" Font-Size="0.9em" ForeColor="White" />

<InstructionTextStyle Font-Italic="True" ForeColor="Black" />

<TextBoxStyle Font-Size="0.8em" />

<LoginButtonStyle BackColor="White" BorderColor="#C5BBAF" BorderStyle="Solid" BorderWidth="1px"

Font-Names="Verdana" Font-Size="0.8em" ForeColor="#1C5E55" />

</asp:Login>

</div>

</div>

</div>

<div id="DragPlace2">

<div id="Box2">

<div id="BoxHandler2" class="boxHandler" >This is the Box Handler</div>

<div id="BoxBody2" >

<asp:Calendar runat="server" ID="MyCalender" BackColor="White" BorderColor="#3366CC" BorderWidth="1px" CellPadding="1" DayNameFormat="Shortest" Font-Names="Verdana" Font-Size="8pt" ForeColor="#003399" Height="200px" Width="220px">

<SelectedDayStyle BackColor="#009999" Font-Bold="True" ForeColor="#CCFF99" />

<TodayDayStyle BackColor="#99CCCC" ForeColor="White" />

<SelectorStyle BackColor="#99CCCC" ForeColor="#336666" />

<WeekendDayStyle BackColor="#CCCCFF" />

<OtherMonthDayStyle ForeColor="#999999" />

<NextPrevStyle Font-Size="8pt" ForeColor="#CCCCFF" />

<DayHeaderStyle BackColor="#99CCCC" ForeColor="#336666" Height="1px" />

<TitleStyle BackColor="#003399" BorderColor="#3366CC" BorderWidth="1px" Font-Bold="True"

Font-Size="10pt" ForeColor="#CCCCFF" Height="25px" />

</asp:Calendar>

</div>

</div>

</div>

<div class="templates">

<div id="dropCueTemplate" class="dropCueTemp"></div>

<div id="emptyTemplate" class="emptyTemp">AN EMPTY SPACE TO DROP THE BOX</div>

</div>

</div>

</form>

<script type="text/xml-script">

<page xmlns:script="http://schemas.microsoft.com/xml-script/2005">

<components>

<control id="DragPlace1">

<behaviors>

<dragDropList dataType="HTML" acceptedDataTypes="'HTML'" dragMode="Move" >

<dropCueTemplate>

<template layoutElement="dropCueTemplate" />

</dropCueTemplate>

<emptyTemplate>

<template layoutElement="emptyTemplate" />

</emptyTemplate>

</dragDropList>

</behaviors>

</control>

<control id="Box1">

<behaviors>

<draggableListItem handle="BoxHandler1" dataType="HTML" />

</behaviors>

</control>

<control id="DragPlace2">

<behaviors>

<dragDropList dataType="HTML" acceptedDataTypes="'HTML'" dragMode="Move">

<dropCueTemplate>

<template layoutElement="dropCueTemplate" />

</dropCueTemplate>

<emptyTemplate>

<template layoutElement="emptyTemplate" />

</emptyTemplate>

</dragDropList>

</behaviors>

</control>

<control id="Box2">

<behaviors>

<draggableListItem handle="BoxHandler2" dataType="HTML" />

</behaviors>

</control>

</components>

</page>

</script>

</body>

</html>

Print | posted on Saturday, January 28, 2006 9:45 AM |

Feedback

Gravatar

# re: Time to Drag and Drop

Great it works with firefox ....
7/27/2006 11:36 AM | khushal
Post A Comment
Title:
Name:
Email:
Website:
Comment:
Verification:
 

Powered by: