This project is read-only.

Add to other list on double click

Jun 27, 2011 at 3:45 AM

Hi there,

first of all.. thank you for such a wonder and useful plugin, I didn't need to to much to have it working just the way I needed.

I'm looking forward for one silly option: is there any way to double click on any item on one list and have that item automaticaly added to the end on the other list and same backwards?

Thank you so much!
d.

Jun 27, 2011 at 1:55 PM
Edited Jun 27, 2011 at 1:58 PM

This script to move an item from one list to the other on double click is reasonably simple:

$("#list1 li").dblclick(function() { $(this).appendTo("#list2"); });
$("#list2 li").dblclick(function() { $(this).appendTo("#list1"); });

The only problem with this is that this is attaching the dblclick handler to each LI element in the list, so once it's moved to the other list clicking it again will invoke the same handler meaning it will be moved to the list it already is in instead of the other list. You could do a test to see which list the LI is in and move to the other but jquery provides an alternative:

$("li", "#list1").live("dblclick", function() { $(this).appendTo("#list2"); });
$("li", "#list2").live("dblclick", function() { $(this).appendTo("#list1"); });

This functions the same as above except now the dblclick handler is attached to #list1 instead, and when you click on LI it will fire the handler attached to #list1 since in effect your clicking it too. It will do a check to make sure the element you clicked on matches the selector which in our case is "li" before firing our handler. This solves our problem.

The only problem now is that if you're running dragsort then it's onmousedown handler is going to trigger after the first click preventing the second click from firing our dblclick handler. So we could alter dragsort to add a delay, but here is an approach (which relies on a feature introduced in jQuery 1.6) of delaying triggering dragsort's mousedown event by 100ms without changing dragsort code as long as this is run before the dragsort code is called.

var delayTimer = null;
$("#list1, #list2").mousedown(function(ev) {
	if (delayTimer != null) return;
	ev.stopImmediatePropagation();
	delayTimer = window.setTimeout(function() {
		$(ev.target).trigger(jQuery.Event("mousedown", { which: ev.which, pageY: ev.pageY, pageX: ev.pageX }));
		delayTimer = null;
	}, 100);
}).mouseup(function() {
	window.clearTimeout(delayTimer);
	delayTimer = null;
});

Jun 27, 2011 at 3:53 PM
Edited Jun 27, 2011 at 8:34 PM

Hi mcm!

thank you so much for your prompt answer.

I was unable to have the feature working after the modifications you suggested. I have added both modifications to the <head> of the main html on the same <script> block as the initialization for the plugin... $("ul:first").dragsort(), is that ok?

Basically, when I make a double click over any item on the list, nothing happens.

Thanks for your support,
d.

EDIT: I just realized that the feature DOES work... BUT.... by double clicking the right button! hahaha that's odd! the option works, but the context menu appears each time too.

Jun 27, 2011 at 11:24 PM
Edited Jun 27, 2011 at 11:39 PM

Yeah that sounds fine, if it only works on right click then it sounds like dragsort is still interfering since it is coded to only trigger on left click, you could try increasing the delay from 100 in the setTimeout function. Are you running jQuery 1.6?

Here's what I have, download dragsort-dblclick.zip from:
https://skydrive.live.com/?cid=05010a422e83cdcf&sc=documents&uc=1&id=5010A422E83CDCF%21128#

Jun 28, 2011 at 1:04 AM

Hi mcm!

thanks again for your prompt answer.

Yes, I'm using jQuery 1.6.1. I just tried your script from the link you said and it works FANTASTIC. My script is showing images (like Picasa photo organizer) and is not working the same way, it works "strange". For some reason looks that there's a delay (besides the one we are configuring to make the script wait to let the second click to take place).

Anyway, I just found a workaround that works very well... I left the "move" option on the left click and prevent the contextual menu to appear using the following code:

<script type="text/javascript" language="javascript">
        $(function() {
                $(this).bind("contextmenu", function(e) {
                        e.preventDefault();
                });
        });
</script>

Now I can move the items with one single click on the left button by drag & drop the item or immediately move the item from one list to another by double clicking the right button.

I really appreciate your help and want to thank you one more time for the great job, been looking for a script like this for a whole week.

Have a good life!
d.