Wierd behaviour using jquery draggable from sidebar

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
barb woolums
Forum Contributor
Posts: 134
Joined: Sun Feb 08, 2009 9:52 pm

Wierd behaviour using jquery draggable from sidebar

Post by barb woolums »

I have items that are draggable from a sliding sidebar. The dragging works but when I scroll down in the left sidebar and start dragging the sidebar scrolls to the top and my draggable element ends up way below my mouse.

Clear as mud? Try it for yourself at http://webrecipemanager.com

log in with user demo p/w demo99
go to menu planning> shopping list in the top menu.

Open up the collapsible titled add items or recipes

Open up the left menu, scroll down and try dragging a recipe to the box titled drop recipes here.

Thanks for any advice.
User avatar
Christopher
Site Administrator
Posts: 13596
Joined: Wed Aug 25, 2004 7:54 pm
Location: New York, NY, US

Re: Wierd behaviour using jquery draggable from sidebar

Post by Christopher »

It is probably getting the position from the expanded list or is incorrect because of the scrolling. I think there is a way to update the position of the draggable to lock it to the cursor. Either there is a configuration setting, or you can register the drag/move callback and update the position of the draggable manually.
(#10850)
User avatar
barb woolums
Forum Contributor
Posts: 134
Joined: Sun Feb 08, 2009 9:52 pm

Re: Wierd behaviour using jquery draggable from sidebar

Post by barb woolums »

Ok the scrolling is happening because I had to do this

Code: Select all

$(".rlink").draggable({
		helper: 'clone',
		revert: false,
		start: function(event, ui) {
			$('.sb-left').css('overflow-y','visible');
			$('#sb-site').css('z-index','0');
		},
		stop: function(event, ui) {
                        $('.sb-left').css('overflow-y','auto');
			$('#sb-site').css('z-index','1');
		}
	});
So that the draggable didn't disappear behind the main page when dragging. Is there another way to do this so that the scrolling doesn't happen?
User avatar
Christopher
Site Administrator
Posts: 13596
Joined: Wed Aug 25, 2004 7:54 pm
Location: New York, NY, US

Re: Wierd behaviour using jquery draggable from sidebar

Post by Christopher »

You might want to control the z-index in you CSS layout and not in the draggable config. Then you will know the draggables are in front of the main content area.
(#10850)
User avatar
barb woolums
Forum Contributor
Posts: 134
Joined: Sun Feb 08, 2009 9:52 pm

Re: Wierd behaviour using jquery draggable from sidebar

Post by barb woolums »

It's actually the overflow setting that causes the scrolling issue.

I tried setting the draggable z-index in my css file but that didn't work :(
User avatar
Christopher
Site Administrator
Posts: 13596
Joined: Wed Aug 25, 2004 7:54 pm
Location: New York, NY, US

Re: Wierd behaviour using jquery draggable from sidebar

Post by Christopher »

You could track the coordinates and manually change the position, but that is a pain. Look at the docs again and see if there are other setting that might help.
(#10850)
User avatar
barb woolums
Forum Contributor
Posts: 134
Joined: Sun Feb 08, 2009 9:52 pm

Re: Wierd behaviour using jquery draggable from sidebar

Post by barb woolums »

Thanks for your help Christopher. I have made an executive decision, I am going to get rid of the whole drag and drop thing and just have an onclick event on the menu items.
User avatar
barb woolums
Forum Contributor
Posts: 134
Joined: Sun Feb 08, 2009 9:52 pm

Re: Wierd behaviour using jquery draggable from sidebar

Post by barb woolums »

Actually - still have to solve this as there's another page with the same issue and I can't use the same solution there. I found the cursorAt option, haven't figured out how to use that yet though
User avatar
barb woolums
Forum Contributor
Posts: 134
Joined: Sun Feb 08, 2009 9:52 pm

[SOLVED] Wierd behaviour using jquery draggable from sidebar

Post by barb woolums »

Got it sorted. Turns out it is a bug in jquery ui. Had to revert back to version 1.9.2
Post Reply