How To Fix Nested Sortable Divs in Jquery UI? - javascript

I'm trying to create a UI that allows the user to take a set of window divs in the DOM and drag them around, sometimes appending divs as children of other divs and sometimes pulling those children out to a parent level. I have a working example but it is extremely touchy when you try to append a "uncle" div to a "nephew" div or vice versa. There is about a 1px leeway to nest the div, as you can see in this JSFiddle: http://jsfiddle.net/UdXr4/124/.
How can I "loosen" the sensitivity so it is not so quick to move on to the next sortable in the tree while clicking and dragging?

You probably need to look at snap, snapMode and snapTolerance. See the API here.

I was able to fix it to a large extent. Thanks to a suggestion by Ryan Niemeyer at Knockmeout.net, the problem was largely rectified by setting a min-height on the container div and adding a little padding to make sure there is a target at the drop zone. Here is the fiddle example: http://jsfiddle.net/UdXr4/130/ The only difference you'll see is the sort-fix class with padding and min-height and the sortable tags are classed as sort-fix.

Related

scrolling within an overflow:visible; div, when the child contents exceed the parent height

I have a sidebar navigation menu with children and sub-children which appear on hover. Here is a jsfiddle link: https://jsfiddle.net/s096zfpd/
This is obviously heavily simplified just to give an idea of what I'm trying to accomplish. My issue is that sometimes the list within <nav> exceeds the height of <nav>. In this case, I want to be able to scroll within <nav>, but doing so would compromise the overflow-x:visible property which I need to display .sub-nav, since CSS simply doesn't allow the simultaneous use of overflow-x:visible and overflow-y:scroll.
I'm thinking that maybe a js solution could work well here. Any suggestions?
Thanks.
If you are using visible for either overflow-x or overflow-y and something other than visible for the other. The visible value is interpreted as auto It means that we can not apply visible and hidden to same DOM element, so ideal solution would be
To create a wrapper and then apply overflow-x and overflow-y to two different DOM elements. Sharing the js fiddle solution to your problem
https://jsfiddle.net/e2edvupc/

What are the options for having a masonry like layout with flexbox with resizable and sortable elements

In my angular app, I'm using ui-sortable to sort an <ul>.
The elements itself are resizable.
This is similar to the setup I have:
And I would like that "4" and "5" use the space on top of them:
Here is a fiddle. Please note that this is an oversimplified example, and that the elements are actually resizable by the user and sortable.
Libraries like masonry won't do because they use absolutely positioned elements, that will undo the way the ui-sortable works, the resize won't push the element's either.
So how can I achieve this?
Have I understood correctly that this is not possible with a css only solution? That flexbox will get the height of the highest element and put that height to the "row".
Is there any js solution that won't rely on position: abolute, or rather, that it will still let me sort?
What are my options without getting rid of the libraries I already have?
What are my options getting rid of the libraries I already have?
I believe I have had a similar issue. I ended up going with http://isotope.metafizzy.co . Then once the user changes the size of the box (or order), you can run a method on the UI callback to re-layout the boxes: http://isotope.metafizzy.co/methods.html#layout

Constraints and draggable item not appearing on top - Version II

OK, so here's the situation:
I'm experimenting with a fixed-width (resizeable) left sidebar
The sidebar contains draggable elements
If one of the elements is dragged to the right, then the draggable element (the helper actually) seems to be disappearing behind the main content.
Why is that happening? Any ideas on how this could be resolved?
Demo: http://83.212.101.132/angjs/ang4.html
This one is almost an exact duplicate of a similar question I had posted earlier, although the solution to this one seems to me rather far from obvious.
.slimScrollDiv SET overflow: visible;
.hbox, #content, .vbox AND following (if there are some) - remove z-index tag!
this was your mistake. Hope it works now, the adding on a Pane seem not to be implemented.
Because the JavaScript is modifying it I can't know for sure. However, my initial thoughts are it has to do with the z-index. The z-index for the center section is 99, and the lis are 0-10. Try making it update the z-index of the lis to 100+ on move.
I seems this remove position in left menu side and white drop box and set droppable menu z-index and position absolute may it works for you

mootools FX.slideOut collapses table row

I'm borrowing some code from a David Walsh tutorial on animated delete with mootools.
When I use the Mootools FX.slide on a table row, it sort of collapses the row horizontally before sliding it up, which is not the desired effect.
There's a fiddle here if you'd like to take a look-- http://jsfiddle.net/gNvvT/
How can I make this effect a smooth slide vertically, rather than collapsing left, then up?
Thanks!
I'm afraid Fx.Slide can't work with table rows, but only with block elements.As Dimitar Christoff said to you.
I've modified your fiddle to get around this problem. From the code you posted, it seems you are quite practical with Mootools, so I just wrote some comments on the code. I'm sure you will get the trick.
http://jsfiddle.net/gNvvT/5/
Let me know if it works on your real world application!
Edit. There was some useless code I left from previous tests. I removed it and I updated the fiddle URL.
this is because TR are not real block style elements, it's display: table-row (iirc).
The Fx.Slide class actually has just 2 tricks it tries to employ to make it appear like it's dissolving, basically:
set overflow from visible to hidden, which - in the context of a TR, makes no sense.
(optional) it can wrap an element in a wrapper and then collapse that, but once again, the wrapper becomes the direct parent of the element and it's a div, which you cannot do in a table.
it then allows it to manipulate the height of the element and make it smaller etc.
the jump happens as it changes the display/overflow and it all goes funny after as it collapses the table.
you should consider an alternative way, like fade and when available, scale transform.

HTML layout design - need better approach

I have to design a layout for my project. There are arrangements of divs, upper Div, lower Div, fixed height, scrolling etc. It is difficult to describe the problem in words, hence I have attached an image below. Please refer the screenshots.
What I want to achieve is to arrange panels with respect to the overall height of the browser window. Pink module is absolute positioned at the bottom of the parent Div. Upper Div is precious sibling of pink Div and it contains panels. when browser is resized scrollbars should not appear in UpperDiv. Instead panels should show scroll (show in second).
It can be done using HTML and CSS and not at all I am hesistant using javascript or jquery. I appreciate any of your approach in doing this. Many thanks.
Sorry I couldn't made HTML properly. Currently my html shows scroll in upperDiv (instead scroll should appear in panels). Here I have created a fiddle. Please check.
here
Made some changes to the CSS, hope this is kinda what you are looking for.
http://jsfiddle.net/vCVUL/embedded/result/
Regards.
You could use ExtJS for this. Have look at the demo page. There you find "Layout Managers" how will do the job for you.
I can't think of a much better way than, after page load, setting the dynamic section's height.
And to handle the resize, we can just bind the same function with JQuery.
http://jsfiddle.net/N3HWz/7/

Categories