Li with link inside

Jul 27, 2009 at 7:21 PM

Hey guys, I've been using dragSort for a couple of days and I really enjoy it.

I have a little issue though, I'm using it so I can drag and drop between two lists which works fine.

However I also need to have a link (probably an arrow) so that users can move intems between the lists by clicking the arrows... It's not quite working and I think that it's because the browser gets confused because it does not know whether the user is dragging the li or clicking on the link... I was hoping you guys had a work arround for that issue....

 

Thx in advance,

Andre Batista

 

Coordinator
Jul 28, 2009 at 10:28 PM

Glad you're finding it useful. If you have a hyperlink basically you need to set an element inside the LI tag that does not contain the hyperlink to act as the drag handler like so:

<ul>
<li>
    <div>contents</div>
    <a href="#">move</a>
</li>
<li>
    <div>contents</div>
    <a href="#">move</a>
</li>
</ul>

$("ul").dragsort({ dragSelector: "li > div", dragBetween: true });

In this way the drag code shouldn't be triggered when they click on the hyperlink and interfere with its behaviour.

May 6, 2010 at 11:15 PM

First off, this is a very smooth drag & drop sorting script.  I am having a similar issue and I am not sure the best way to solve it.  My goal for using your script is to take a drop down list of links and make them sortable for each of the users of my website (used internally to my company).  The issue I am having is that after I drop the link, it initiates the click and launches the link.  I would really prefer not to have a div above it.  Is there another way of handling this?

Thanks in advance.

Coordinator
May 7, 2010 at 12:47 PM

There is, to prevent links from working you just need to return false in the click event handler so something like this:

$("ul").click(function() { return false; }

If you wanted the links to still work when you simply click on them but not when you drag and drop then something like this should work:

$("ul").mousedown(function() { time = new Date(); }).click(function() { return (new Date() - time) < 100; });

Just so you are aware if using v0.3.8 or later there's a new setting called dragSelectorExclude set to "input, textarea, a[href]" that will mean dragsort will no longer get triggered if clicking on a link (just added this to the documentation on the home page), so you'll want to set that to "input, textarea" since it sounds like in your scenario you still do.

May 7, 2010 at 11:33 PM

Thanks for the quick response and advice.  After further thought, I decided to have a small icon to the left of the link to use as the drag handle.  It works great in IE 6, but I am having issues with it in FF.  I cannot get it to drag the item unless the dragSelector is set to "li".  Here is a little snippet of the test code structure:

<ul>..........

<li><a href="#"><span>Product Info</span></a>
            <ul class="dragSort">
                <li><div class="dragHandle"><img src="images/dragHandle.png" width="11" height="11" /></div><a href="#" class="parent" title="subItem1"><span>Sub Item 1</span></a>
                    <ul class="dragSort">
                        <li><div class="dragHandle"><img src="images/dragHandle.png" width="11" height="11" /></div><a href="infobar_test.htm" onmouseover="(showInfoBar('This is info about Sub Item 1.2!'));" onmouseout="(hideInfoBar());"><span>Sub Item 1.1</span></a></li>
                        <li><div class="dragHandle"><img src="images/dragHandle.png" width="11" height="11" /></div><a href="infobar_test.htm" onmouseover="(showInfoBar('This is info about Sub Item 1.2!'));" onmouseout="(hideInfoBar());"><span>Sub Item 1.2</span></a></li>
                    </ul>
                </li>
                <li id="subItem2"><div class="dragHandle"><img src="images/dragHandle.png" width="11" height="11" /></div><a href="infobar_test.htm" class="parent" title="subItem2"><span>Sub Item 2</span></a>
                    <ul class="dragSort">
                        <li><a href="infobar_test.htm" onmouseover="(showInfoBar('This is info about Sub Item 1.2!'));" onmouseout="(hideInfoBar());"><span>Sub Item 2.1</span></a></li>
                        <li><a href="infobar_test.htm" onmouseover="(showInfoBar('This is info about Sub Item 1.2!'));" onmouseout="(hideInfoBar());"><span>Sub Item 2.2</span></a></li>
                    </ul>
                </li>
                <li id="subItem3"><div class="dragHandle"><img src="images/dragHandle.png" width="11" height="11" /></div><a href="infobar_test.htm" title="subItem3" onmouseover="(showInfoBar('This is info about Sub Item 1.2!'));" onmouseout="(hideInfoBar());"><span>Sub Item 3</span></a></li>
                <li id="subItem4"><div class="dragHandle"><img src="images/dragHandle3.png" width="11" height="11" /></div><a href="infobar_test.htm" title="subItem4" onmouseover="(showInfoBar('This is info about Sub Item 1.2!'));" onmouseout="(hideInfoBar());"><span>Sub Item 4</span></a></li>
                <li id="subItem5"><div class="dragHandle"><img src="images/dragHandle.png" width="11" height="11" /></div><a href="infobar_test.htm" title="subItem5" onmouseover="(showInfoBar('This is info about Sub Item 1.2!'));" onmouseout="(hideInfoBar());"><span>Sub Item 5</span></a></li>
                <li><div class="dragHandle"><img src="images/dragHandle3.png" width="11" height="11" /></div><a href="#" title="subItem6" ><span>Sub Item 6</span></a></li>
                <li><div class="dragHandle"><img src="images/dragHandle3.png" width="11" height="11" /></div><a href="#" title="subItem7" ><span>Sub Item 7</span></a></li>
            </ul>
        </li>..........

</ul>

<form name="sortForm" action="Test.php" method="post">
    <input type="hidden" id="sortOrder" name="sortOrder">
        
</form>

<script type="text/javascript">
$("ul.dragSort").dragsort({dragSelector: "li > div", dragEnd: saveOrder, placeHolderTemplate:"<li class='placeHolder'></li>"});
function saveOrder() {
    var serialStr = "";
    $("#menu li a").each(function(i, elm) { serialStr += (i > 0 ? "," : "") + $(elm).attr("title"); });
    /*alert(serialStr);*/
    
    document.getElementById('sortOrder').value = serialStr;
};
</script>

Any thoughts?  Has anyone else had this issue.  The Firefox version is (3.0.18)...yes this company is on old browsers due to lack of forsight ='(

Thanks,

Austin

Coordinator
May 10, 2010 at 7:55 AM

I'm afraid not, it seems to work for me after adding the id menu to the outer ul tag on Fx 3.0.18. What jquery and dragsort version are you using?

May 10, 2010 at 9:53 PM

I found the issue.  I didn't have a z-index defined for the drag handle in my css.  Apparently something must have been in front of my div.  Not sure why it worked in IE but not FF.....of course I still don't know all the little quirks of all the browsers =)  Thanks alot for your help.  Unfortunately some people post their fantastic code but offer no support for questions on it.  Thanks again.