We Keep Coding

Creating a side panel similar to code pen

I am trying to create a side panel similar to that of codepen editor in react, where you can drag to adjust the size of the different editors.
If I drag an editor header towards the bottom low enough, the editor below it will follow, almost as if I have appended that component to the drag, likewise if i try ti drag the header upwards. I have built the layout to my liking with a similar concept to the accordion from material UI:
https://mui.com/material-ui/react-accordion/
I was also able to mimic the on click behaviors of the header from codepen, for example, double click would open the editor to full size and triple click will open all evenly by keeping track of the heights of all the 'containers' in a useState hook. However, I am having trouble with the dragging part. I am looking for some suggestions for good libraries/ideas to use to help me achieve this.
Currently I am using framer motion to make the expanding of the container more 'smooth'.
https://www.framer.com/docs/transition/
I noticed that they also have dragging capabilities which I am also exploring. My idea is to have an onDrag for each of the headers. Depending on which header I am dragging, if I drag down until my container size is 0, I start shrinking the container below it and then the one below it and so on and so forth. I am able to get the Y property from the onDrag function but I am a bit hesitant to do my calculations in x/y coordinates. Does anyone have any suggestions or any libraries that might make this easier?

I don’t know any libraries. I think if you got this far you can probably do it yourself in plain js, using listeners and selectors, etc, or whatever react can provide. Is there something specific that makes you ‘hesitant’? I recently found these which made things easier for me, they might not be 100% relevant but still good to know: getBoundingClientRect
https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect
That will tell the position relative to the viewport, it was useful for me dragging dividers between panels.
And if you need the position relative to the container:
https://stackoverflow.com/a/11634823/5350539
And if you’re not already, I guess you could look at setting the panel CSS positions using ‘bottom’ (with position absolute or relative), then animating the height to e.g. 30px less than the bottom edge of the upper panel. Tip: while dragging, add a body class to disable user select: user-select: none;

Detecting Collisions With Two Animated Divs

I am using CSS animations to move two rectangle div tags across the screen. Each one is like a pole (taller than it is wide). The animations make each div rotate so it is at an angle before going back to pointing upwards.
One animation is triggered by the user, and the other is constantly moving itself towards the other div.
I have tried using getBoundingClientRect() to detect when the corner of one div intercepts the div that is moving towards it. I also used jQuery to get the .position() of them, but they return left: 0.
The div that is moving across the screen is done using the margin-left property.
Are there any methods I should be looking into or does anyone have a solution to a similar problem?
Thanks,
DH

You should use transform: translate to move them.
Also, since you're moving the elements in javascript you should just keep their state stored in memory and do your collision detection entirely in javascript.
There should be no need to use DOM APIs for this.

There's no method on the DOM for you to be able to detect overlapping objects. I would suggest using a geometric model of the scene and doing the trigonometry yourself to see when there is an intersection between the two boxes. Animating your objects explicitly using JS is also easier, since you wouldn't have to worry about getting out of sync with the browser's CSS animations or transitions.
You'd basically be looking for a line-line intersection.

How to constrain movement when using HTML5 native drag and drop?

Various JavaScript libraries, such as jQuery UI, offer drag-and-drop interactions where you can constrain the movement of the dragged element to a single axis, or within a particular area.
Is this sort of thing possible using the native HTML5 drag and drop API?

It's totally different!
The jQuery UI drag and drop make element move (with top and left CSS properties) in the page.
The native HTML5 drag and drop API only allow you to move a "ghost" of the draggable element (of course, you can hide the original element while dragging the ghost).
The API come with a lot of event but no, you can't constrain mouse position so you can't constrain to a single axis (cause the ghost follow the mouse position, even if the mouse leave the page (but event may probably stop operate)).

How to emulate this javascript functionality (movable div and saved positions)

I have seen a feature on a site I would like to emulate. I have intermediate php skill but am a novice javascript user. The feature is the site content displayed in divs which can be moved around on the screen and their position saved using cookies. This site: [url]www.nowgamer.com[/url] is where I saw it (latest podcasts, videos, reviews etc with filter)
How would I go about achieving this through javscript? I want to know how to connect javascript with the cookie so that the positions of the square divs are saved, as are the preferences of the content filter on each div. How can I achieve this?
Would this be a big job? Thank you for any help, I am working independently on this in my spare time so your contribution with advice is my lifeline.

As Zoidberg commented, its easy with JQuery or Yui, or any other javascript library that provides drag & drop functionality. They are almost easy to configure, checking at demo they give. They also expose certain events like beforeDrag, afterDrag, onDrop, etc. where you can fire a simple js function check the elements' dropped position store it in cookies. For setting cookies, there are world of code on internet.
Also, you might want to check floating absolute/relative positioning css, if your DOM divs are going to be floating around the page.
GoodLuck.

simplyharsh has the proper answer, but I'd like to expand on it a bit:
The basics of a draggable div aren't too complicated. You attach an onclick handler to initiate the dragging. Internally, that's accomplished by changing the div's CSS so it's position: absolute. Then you start monitoring mouse movements (basically onmousemove) and changing the div's top and left according to the movements you've captured.
Dropping is a bit more complicated. You can always just release the mouse and leave the div wherever you ended up moving it, but that leaves it absolutely positioned and therefore outside of normal document flow. But dropping it "inside" some other element means a lot of prep work.
Because of how mouseover/mouseout/mouseenter events work, they WON'T work while you're dragging an element - you've got your draggable div under the mouse at all times, so there's no mouseenter/leave events being fired on the rest of the page. jquery/mootools and the like work around it letting you specify drop zones. The locations/sizes of these zones are precalculated and as you're dragging. Then, as you're dragging, the dragged object's position is compared to these precalculated drop zone locations for every move event. If you "enter" one of those zones, then internally the libraries fire their mouseenter/mouseleave/mouseover events to simulate an actual mouseenter/leave/over event having occured.
If you drop inside a zone, the div gets attached as a child of that zone. If you drop outside, then it will usually "snap back" to where it was when you initiated the drag.
Resizing is somewhat similar, except you're adjusting height and width instead of top and left.

Creating mosaic/tiled image effect with jquery

Is there a way to create the effect shown here on msi.com main image? Though done in flash, I'd prefer doing it with jquery. I've also tried with 'mosaic generators', but haven't been able to replicate the effect well, but use of a generator with js would be acceptable too.
[edit] I failed to mention, I'm only interested in emulated the tiled/mosaic aspect of the effect, not animation. I'd like a large image (e.g. 400px by 300px) separated by whitespace (or color customizable borders) into 9 equally sized blocks or tiles each.
While I would like to apply a individual hover effect to each image, giving each the effect they are separate entities, I don't necessarily need any further animation.
Rounded corners aren't important or wanted.
[/edit]

It would be pretty interesting to do it with jquery. You'd have a table of images, each with a hover event that toggled an animation when mousing on and off. The logic isn't too hard; getting the images and the animation to look nice would be a little harder, but not undoable. It depends on how closely you want to replicate the effect. :D
edit: you just want a mosaic of images? you can just use a table to position all of the images, and use js for the events. What else do you want or need js for? :D

Here's an idea. Load a large image into a DIV. Decide on the size of your windows and create a PNG with transparency where you'd like the windows to be. (Opaque at the borders with thickness to control how wide you'd like the whitespace.) To create the effect, use three layers. The image at the bottom layer (which you can swap out as needed). The middle and top layer will be repeated along the x and y axises and controlled individually by jQuery. The middle layer will have the PNG with transparency and on top of that, the top layer with just a solid color (matching your page's background to "seem" invisible?). To create any "pretty" effects, you can adjust the opacity or animate the top layer of the separate boxes to show/hide the image on the bottom layer which will be visible through the middle layer's transparent area in the PNG.
Hope my explanation was clear. With some smart coding, this can be packaged and reused anywhere you'd like.