Wierd behaviour using jquery draggable from sidebar
Moderator: General Moderators
- barb woolums
- Forum Contributor
- Posts: 134
- Joined: Sun Feb 08, 2009 9:52 pm
Wierd behaviour using jquery draggable from sidebar
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.
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.
- 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
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)
- barb woolums
- Forum Contributor
- Posts: 134
- Joined: Sun Feb 08, 2009 9:52 pm
Re: Wierd behaviour using jquery draggable from sidebar
Ok the scrolling is happening because I had to do this
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?
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');
}
});
- 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
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)
- barb woolums
- Forum Contributor
- Posts: 134
- Joined: Sun Feb 08, 2009 9:52 pm
Re: Wierd behaviour using jquery draggable from sidebar
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
I tried setting the draggable z-index in my css file but that didn't work
- 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
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)
- barb woolums
- Forum Contributor
- Posts: 134
- Joined: Sun Feb 08, 2009 9:52 pm
Re: Wierd behaviour using jquery draggable from sidebar
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.
- barb woolums
- Forum Contributor
- Posts: 134
- Joined: Sun Feb 08, 2009 9:52 pm
Re: Wierd behaviour using jquery draggable from sidebar
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
- barb woolums
- Forum Contributor
- Posts: 134
- Joined: Sun Feb 08, 2009 9:52 pm
[SOLVED] Wierd behaviour using jquery draggable from sidebar
Got it sorted. Turns out it is a bug in jquery ui. Had to revert back to version 1.9.2