Draggable/Droppable and Tabs
<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:0in;
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:8.5in 11.0in;
margin:1.0in 1.0in 1.0in 1.0in;}
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-US link=blue vlink=purple>
<div class=Section1>
<p class=MsoNormal>Hello,<o:p></o:p>
<p class=MsoNormal><o:p> </o:p>
<p class=MsoNormal>I am working on a screen where I would like to incorporate
Tabs and the Drag/Drop UI components. Basically I want to have two tabs, droppable
div’s on each tab, and draggable list items in each div. Then, I would
like to be able to drag one list item from one tab to another and drop it into
a desired div. <o:p></o:p>
<p class=MsoNormal><o:p> </o:p>
<p class=MsoNormal>I have the setup okay, but I am not sure how to drag to the
second tab. What I would really like to happen is that you drag the item up to
the second tab and on the hover it switches to the second tab and then you can
drop the item in which ever div you want. The alternative, if it is easier, is
to drop the list item on the second tab and it is automatically added to the
first droppable div on the second tab.<o:p></o:p>
<p class=MsoNormal><o:p> </o:p>
<p class=MsoNormal>Thanks for any help you can provide.<o:p></o:p>
</div>