Removal of dragged element from the droppable

Removal of dragged element from the droppable

I have two panels, one for available tasks and the other one for selected
tasks. The tasks are panel controls themselves but created and loaded code
behind.
foreach (CD.Task restTasks in allTasks)
{
Panel p = new Panel();
p.ID = "pslot^" + i;
p.CssClass = "cpslot";
p.Style.Add("Border", "none");
p.BackColor = ColorTranslator.FromHtml("#F0F8FF");
p.Height = 25;
pSelectedTasks.Controls.Add(p);
Panel pT = new Panel();
pT.ID = "ptask*" + restTasks.Id + "^" + i;
pT.CssClass = "cptask";
pT.Style.Add("Border", "Ridge");
pT.BackColor = ColorTranslator.FromHtml("#C0D9D9");
pT.Height = 25;
pT.Style[HtmlTextWriterStyle.ZIndex] = "999";
Label lb = new Label();
lb.Text = restTasks.Id + " : " + restTasks.Name;
pT.Controls.Add(lb);
upAvailableTasks.ContentTemplateContainer.Controls.Add(pT);
//pT.ApplyStyle(p.ControlStyle);
i++;
}
The available tasks panel has all the children tasks panels with the class
name ".ptask_[someid]" and the selected tasks panel is initialised with
children panels with the class name ".pslot_[someid]". Then I use jquery
to make the ptask panels draggable to be dropped on pslots:
$(".cptask").draggable({
containment: "#MainContent_uptaskSelections",
cursor: "move",
stack: "MainContent_pSelectedTasks div",
revert: true,
});
$(".cpslot").droppable({
drop: handleTaskDrop,
accept: ".cptask"
});
}
function handleTaskDrop(event, ui) {
var draggable = ui.draggable;
var cll = draggable.attr('class').split(/\s+/)[0];
addToList(draggable.attr('Id'), $(this).attr('Id'));
ui.draggable.draggable('option', 'revert', false);
ui.draggable.position({ of: $(this), my: 'left top', at: 'left
top' });
//var p = $("[id$='MainContent_pslot^1']");
//var offset = p.offset();
//console.log(offset);
}
<div id="dTasks" style="width: 98%; height: 60%">
<h2 style="color: grey">Drag tasks to
Selected</h2>
<br />
<div id="dAvailableTasks"
style="float: left; width: 47%;
border: ridge; padding-left: 10px;
background-color: aliceblue">
<h3>Available Tasks</h3>
<br />
<asp:TextBox ID="tbSearchTask"
runat="server"
OnTextChanged="tbSearchTask_TextChanged"
AutoPostBack="true"
ValidationGroup="grpNonReq"
ValidateRequestMode="Disabled"></asp:TextBox>
<ajaxToolkit:TextBoxWatermarkExtender
ID="tbweSearchTask" runat="server"
TargetControlID="tbSearchTask"
WatermarkText="Search Task
Here..."></ajaxToolkit:TextBoxWatermarkExtender>
<br />
<hr />
<asp:UpdatePanel
ID="upAvailableTasks"
runat="server"
UpdateMode="Conditional">
<ContentTemplate>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger
ControlID="tbSearchTask"
EventName="TextChanged" />
</Triggers>
</asp:UpdatePanel>
</div>
<div id="dSelectedTasks"
class="testClass" style="float: right;
width: 47%; border: ridge;
padding-left: 10px">
<h3>Selected Tasks</h3>
<br />
<br />
<br />
<hr />
<asp:Panel ID="pSelectedTasks"
runat="server">
</asp:Panel>
</div>
</div>
here addToList is used to store the dragged tasks ids in a list which can
be edited code behind as it uses a webMethod which also helps in
reordering of the tasks and had plans to use it for removal once i figure
out how to do it.
Everything seems to be working fine, the tasks drag just fine, the
ordering is storing values correctly. But I am stuck on the next step
which is if we want to remove a task from the slot and put it back in the
available tasks panel. If anybody can guide me here.
Thanks.