I was having difficulty trying to figure out how to drag and drop between two different div's and I found a reference to http://docs.jquery.com/UI/Sortable#option-connectWith in another post and it works magnificently... Almost anyway.
I am now able to drag items between divs but if I drag the last item from a div it becomes closed to me. I can't drag anything back into it... Is there something basic I am missing?
Thanks for any help!
You could just add a display:none; element in each div
When you drag the last element from the div it's likely collapsing, which is almost like removing the div. As state in the comment you should set a min-height for the div, and possibly a min-width as well to prevent the div for collapsing when it's empty.
Related
Everything works. However, when clicking on the drop down menu icon, the drop down elements hesitate to slide at first. I obviously want it to have a more fluid transition when sliding.
here is my jsfiddle
https://jsfiddle.net/0s49o5bz/
The problem is, that you are setting a min-height for several elements, as the span and the ul. This prevents the animation from being fluent.
I made a div draggable with $("#divID").draggable(); and it works.
Inside this div I have a second div. I'd like to have the inner div not draggable,
so that the user can drag the whole thing using a "frame" around the inner div.
The inner div contains a ScrollBar and other elements that conflict with the "draggable" feature.
Is it possibile?
Thank you.
Edit:
I made a test page: TEST
The user should be able to drag everything (including "other elements") only in the upper or lower strip, where the cursor become a cross of arrows. I want the user to be unable to drag where the cursors become a pointer.
Thanks again.
I had a vaguely similar issue when working with accordions, I wanted links in the accordion headers and they conflicted with the accordion behaviour.
I fixed it by attaching an event handler to the inner element, and all it did was call evt.stopPropagation() to prevent the parent element(s) from getting the conflicting events.
Try position fixed
div#notDraggable{
position:fixed;
}
I don't know if this is possible. Is there any way to make a div element visible while the div is not displayed? Specifically I'm using drag and drop items from a drop-down list, and once the list closes, they're invisible. Ideas?
use the Jquery UI drag samples, can help you for what you want.
I have a jQuery conundrum that I'm not sure can be resolved. Inside a content slider I have absolutely positioned divs creating a tool-tip style pop-up on hover. Because the containing content slider overflow must be set to hidden, the tool-tip pop-up gets cut off where it overflows. I would like the pop-up to display in full when overlapping the slider it is contained within. If anyone has a workaround for this I'd be very appreciative!
Here's a link to my working file from which you can see the problem and the code.
Many thanks for any advice.
Your animation inside 'slidesContainer' relies on overflow:hidden so the large image doesn't stick out of the div and the only way for you to get the balloons pop out is to remove that overflow:hidden and make it visible
I don't think you can have the two at the same time
Right, so I don't think there was a straight forward solution so what I did was change the script to refer to div IDs instead of referring to the 'next' div. I moved the pop-up div's outside the slide element and absolutely positioned them relative to the page rather than the link. It's more long winded but works fine! Just means you need to refer individually to each pop-up div in the script. Thanks for you help anyway!
I have a simple Javascript drag function. You can see it here:
http://jsfiddle.net/XpAyA/12/
The red #dragger div is draggable. It is nested in an overflow scroll div but it doesn't trigger a "scroll" when it gets over the limit. Probably due to the fact that it is positioned absolute.
Is there a way yo fix this? Make the scroll happen when it exceeds the limits?
Thank you
First of all you have to give the containing div a position:relative. That way the absolutely positioned dragger stays inside of it and can't go over it's borders.
I'm not sure why the scrolling doesn't work, but is there a reason you scripted your dragging function yourself while you do have access to jQuery? There's a powerful function in jQuery called draggable that does exactly what you want.
Here's a version that scrolls http://jsfiddle.net/vcJuF/1/
I removed the inner div, which seemed to help. The scrollbars update now, I think you just need to update your javascript to actually scroll the div as you drag.