Page 1 of 1
Wierd behaviour using jquery draggable from sidebar
Posted: Thu Mar 27, 2014 1:41 am
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.
Re: Wierd behaviour using jquery draggable from sidebar
Posted: Thu Mar 27, 2014 10:57 am
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.
Re: Wierd behaviour using jquery draggable from sidebar
Posted: Thu Mar 27, 2014 6:49 pm
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?
Re: Wierd behaviour using jquery draggable from sidebar
Posted: Thu Mar 27, 2014 9:51 pm
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.
Re: Wierd behaviour using jquery draggable from sidebar
Posted: Thu Mar 27, 2014 11:03 pm
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

Re: Wierd behaviour using jquery draggable from sidebar
Posted: Fri Mar 28, 2014 3:40 pm
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.
Re: Wierd behaviour using jquery draggable from sidebar
Posted: Sat Mar 29, 2014 1:01 am
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.
Re: Wierd behaviour using jquery draggable from sidebar
Posted: Sat Mar 29, 2014 1:46 am
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
[SOLVED] Wierd behaviour using jquery draggable from sidebar
Posted: Sat Mar 29, 2014 2:45 am
by barb woolums
Got it sorted. Turns out it is a bug in jquery ui. Had to revert back to version 1.9.2