Draggables and absolute positioning

Draggables and absolute positioning

<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word" xmlns:m="http://schemas.microsoft.com/office/2004/12/omml" xmlns="http://www.w3.org/TR/REC-html40">
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=us-ascii">
<meta name=Generator content="Microsoft Word 12 (filtered medium)">
<style>
<!--
/* Font Definitions */
@font-face
{font-family:"Cambria Math";
panose-1:2 4 5 3 5 4 6 3 2 4;}
@font-face
{font-family:Calibri;
panose-1:2 15 5 2 2 2 4 3 2 4;}
/* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal
{margin:0cm;
margin-bottom:.0001pt;
font-size:11.0pt;
font-family:"Calibri","sans-serif";}
a:link, span.MsoHyperlink
{mso-style-priority:99;
color:blue;
text-decoration:underline;}
a:visited, span.MsoHyperlinkFollowed
{mso-style-priority:99;
color:purple;
text-decoration:underline;}
span.EmailStyle17
{mso-style-type:personal-compose;
font-family:"Calibri","sans-serif";
color:windowtext;}
.MsoChpDefault
{mso-style-type:export-only;}
@page Section1
{size:612.0pt 792.0pt;
margin:72.0pt 72.0pt 72.0pt 72.0pt;}
div.Section1
{page:Section1;}
-->
</style>
<!--[if gte mso 9]><xml>
<o:shapedefaults v:ext="edit" spidmax="1026" />
</xml><![endif]--><!--[if gte mso 9]><xml>
<o:shapelayout v:ext="edit">
<o:idmap v:ext="edit" data="1" />
</o:shapelayout></xml><![endif]-->
</head>
<body lang=EN-GB link=blue vlink=purple>
<div class=Section1>
<p class=MsoNormal>‘lo all,<o:p></o:p>
<p class=MsoNormal>I am trying to set up a calendar style conference
arrangement tool for a client. Times appear down the left hand side, days
across the top, and sessions in the grid layout. They can be resized to change
the timeslots, and dragged around to change start times, or days.<o:p></o:p>
<p class=MsoNormal><o:p> </o:p>
<p class=MsoNormal>In the initial layout the session boxes (which are <div>)
are absolutely positioned, but when UI fires, they become relatively positioned
and some of them then jump out of place. If I drag the first box, the second
also moves as a side effect.<o:p></o:p>
<p class=MsoNormal><o:p> </o:p>
<p class=MsoNormal>How do I get around this problem, and additionally is there
any in-built way to prevent two draggables overlapping so that I can’t
drag one session on top of another?<o:p></o:p>
<p class=MsoNormal><o:p> </o:p>
<p class=MsoNormal>Regards,<o:p></o:p>
<p class=MsoNormal>Michael Price<o:p></o:p>
</div>