Problem firing "click" event on sortable child elements
<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:Calibri;
panose-1:2 15 5 2 2 2 4 3 2 4;}
@font-face
{font-family:Consolas;
panose-1:2 11 6 9 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;}
p.MsoPlainText, li.MsoPlainText, div.MsoPlainText
{mso-style-priority:99;
mso-style-link:"Plain Text Char";
margin:0in;
margin-bottom:.0001pt;
font-size:10.5pt;
font-family:Consolas;}
span.EmailStyle17
{mso-style-type:personal-compose;
font-family:"Calibri","sans-serif";
color:windowtext;}
span.PlainTextChar
{mso-style-name:"Plain Text Char";
mso-style-priority:99;
mso-style-link:"Plain Text";
font-family:Consolas;}
.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=MsoPlainText>Hello,<o:p></o:p>
<p class=MsoPlainText><o:p> </o:p>
<p class=MsoPlainText>I am calling $("ul#profileFields").sortable({
items: "*[id^=PFLI_]" }); on the following markup. This is making
all the "li" entries sortable but I also have click events wired to
the children elements of the list item (ie. the "<span>" and
"<a>" elements do something on click) The problem I'm having
is that unless your cursor is absolutely still when clicking on either the
"span" or "a" elements the draggable event starts on the
"li" entry and the click event does not fire. Is there a way to
exclude children elements for initiating the drag event? I have also tried to
hook the "start" event and then cancel the drag if the event target
is either the span or the anchor element but haven't had any luck here either.<o:p></o:p>
<p class=MsoPlainText><o:p> </o:p>
<p class=MsoPlainText><o:p> </o:p>
<p class=MsoPlainText><ul id="Ul1" class="no-blts vert-list-1
w-300 ui-sortable"><o:p></o:p>
<p class=MsoPlainText> <li id="PFLI_26" style="cursor:
move;"><o:p></o:p>
<p class=MsoPlainText> <div style="width:
280px;"><o:p></o:p>
<p class=MsoPlainText> <span style="cursor:
pointer;">Add Field 2</span><o:p></o:p>
<p class=MsoPlainText> </div><o:p></o:p>
<p class=MsoPlainText> <div><o:p></o:p>
<p class=MsoPlainText> <a class="icon-button
delete b16" title="delete" href="#"></a><o:p></o:p>
<p class=MsoPlainText> </div><o:p></o:p>
<p class=MsoPlainText> </li><o:p></o:p>
<p class=MsoPlainText> <li id="PFLI_32" style="cursor:
move;"><o:p></o:p>
<p class=MsoPlainText> <div style="width:
280px;"><o:p></o:p>
<p class=MsoPlainText> <span style="cursor: pointer;">where
are you?</span><o:p></o:p>
<p class=MsoPlainText> </div><o:p></o:p>
<p class=MsoPlainText> <div><o:p></o:p>
<p class=MsoPlainText> <a class="icon-button
delete b16" title="delete" href="#"></a><o:p></o:p>
<p class=MsoPlainText> </div><o:p></o:p>
<p class=MsoPlainText> </li><o:p></o:p>
<p class=MsoPlainText></ul><o:p></o:p>
<p class=MsoPlainText><o:p> </o:p>
<p class=MsoPlainText>Thanks,<o:p></o:p>
<p class=MsoPlainText>Craig<o:p></o:p>
<p class=MsoNormal><o:p> </o:p>
<p class=MsoNormal><o:p> </o:p>
<p class=MsoNormal><o:p> </o:p>
</div>