How do I make elements draggable between two divs? This seems to be something that draggables should do. But I haven't been able with the code I have. In this jsfiddle I have two divs with draggable elements. I want to get one element to go from the first div to the second div. That functionality must exist on many web sites.
Here is the jsfiddle with the code.
http://jsfiddle.net/gkvgn/9/
I have asked before and thought that someone would know how to have that functionality. If the code I have isn't the right way, how do I define an element and the draggable containment option to be able to have that functionality.
There's a similar Stack Overflow question that was answered here:
jquery ui draggable elements not 'draggable' outside of scrolling div
I implemented the above solution on my own project and it worked beautifully.
I agree that it does seem like if you set the containment to window or document, cross-div dragging should be allowed. I imagine that you'd prefer overflow to stay hidden due to the amount of content you want to keep in your divs.
Finally found the problem. Specifying overflow: hidden; for the container div restricts the draggable area to the container only. If I remove that specification from the styles. The elements are draggable across the divs. Here is the fiddle with the fix.
http://jsfiddle.net/gkvgn/10/
I could drag draggables from a scrollable div into a different non-parent when I stopped trying to use jquery. I ended up using https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/Drag_operations
Related
I'll try and keep it concise.
I am required to utilise the draggable plugin for GSAP in my project. The plugin is great and works really well. I think my issue is just something I'm not quite grasping.
Codepen:
https://codepen.io/mhcdotcom/pen/dzyNmB
Dragging the #stage element allows the click and drag functionality.
The .inner element extends out of the container div so I use overflow:hidden on the stage element.
When I do this, the portion of the .inner elements that extend past the viewable area don't come in to frame and seem to be cut off.
Is there a way around this in GSAP? What am I missing?
I have googled to no avail.
Any help is much appreciated.
Thank you
Moe
"All" draggable does is add a transition to the element that is dragging, so any overflows etc will still be honoured.
I can't be 100% sure what you are trying to achieve, but you can add classes on dragStart/dragEnd that means you should be able to get the behaviour you need.
I have forked a codepen giving you a basic example.
onDragStart: function() {
stage.classList.add('dragging');
},
onDragEnd: function() {
stage.classList.remove('dragging');
}
https://codepen.io/motionimaging/pen/xLxLpG
This question already has answers here:
CSS overflow-x: visible; and overflow-y: hidden; causing scrollbar issue
(9 answers)
Closed 6 years ago.
I have a div set to hide content with overflow-x and display (visible) content with overflow-y.
Unfortunately it's not working how I'd like it to. It adds vertical scroll bars - I assume this is because overflow-x and overflow-y don't function together.
As far as I'm aware if one overflow is set to hidden, the other gets set to auto.
Is there any other way around this? So I can have the overflow hidden horizontally and displayed (without a scroll) vertically?
Just so there's no confusion here's a fiddle to explain a little more: http://jsfiddle.net/kwnQk/
edit
Here is the actual issue I'm having: http://jsfiddle.net/kwnQk/1/
I have a select box, created from divs and jQuery, that ends up going over the div height, causing it to add scroll bars.
It's a shame the overflow function works the way it does because the div's overflow-x must be hidden, causing the div's overflow-y to be auto.
edit 2
Please see this new JSFiddle to show exactly why I need the overflow: http://jsfiddle.net/kwnQk/3/
It consists of sliders too, which need to be set to a certain width. And they cannot take up the entire height of the page so I have to limit their height, too.
I would think you can just leave the overflow property to visible and just use padding left and right.
Unless you have images, the text should just get wrapped.
For images, you should look at using children divs with width:100%
Can you try some jQuery scroll plugins for this?
http://manos.malihu.gr/tuts/jquery_custom_scrollbar.html
http://baijs.nl/tinyscrollbar/
http://www.net-kit.com/jquery-custom-scrollbar-plugins/
Try the jquery selectbox plugin, it's great and do exactly what you are trying to:
http://jquery-ui.googlecode.com/svn/branches/labs/selectmenu/index.html
Bad combination, unfortunately. From the documentation http://www.w3.org/TR/css3-box/#overflow-x:
The computed values of ‘overflow-x’ and ‘overflow-y’ are the same as their specified values, except that some combinations with ‘visible’ are not possible: if one is specified as ‘visible’ and the other is ‘scroll’ or ‘auto’, then ‘visible’ is set to ‘auto’.
So i am trying to create a stage where i can have multiple items on it that are draggable.. but when the stage is clicked and dragged all the elements move with it.
So far I can only get one or the other to work by adding the 'draggable' property to either.
Has anyone got a solution for how to get this working?
Here is the JSfiddle http://jsfiddle.net/KHVhU/
I have considered the possibility that I might need to make the containing div draggable using jquery-ui instead of trying to do the whole thing inside the canvas, but ideally wouldnt want to take this route
the correct kineticJs library was not included. Use the correct KineticJs below.
http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.4.1.min.js
Now, each individual items will be draggable even with stage.
found the solution with the help of the setDraggable() function
Updated the JSFiddle here: http://jsfiddle.net/KHVhU/1/ :)
I trying to make a simple animated menu that slides in and out but i have stumbled on getting the div's to overlap as required.
http://jsfiddle.net/bluestreak/eQcsc/
It currently animates well but doesn't over lap. and I have tried all manner of combinations of positioning.
Give all your infomenu IDs position:absolute
Is it possible to control the drop down list width on select in IE8?
When the page loads I want the drop down list to be small enough to only contain the word SELECT, but when the user clicks on it to make the selection, it should expand enough to make sure all the choices are fully visible, widthwise.
FF does it, IE9 does it. But IE8 cuts off the width.
Any fixes?
thanks
Just try to include below CSS.
select:focus{width:auto !important;}
I hope it solves your problem.
For IE8 you will need to use some JavaScript for this. There are JQuery plugins that do this too, but I think there is no work around without using js.
Take a look at this other SO thread for different approaches and js libraries you might use.
In my experience, the best solutions involve replacing the select element with some other HTML, CSS and JavaScript combination, as trying to change the width of the original select on certain events will move the content on the right of it.