Develop Reference

Horizontal and vertical mouse resize of block element / flexbox with Dragula

I'm trying to make the same kind of mouse resizing as the typical window resize functionality, where you can grab each of the 4 edges of an element and resize - or the corners for resizing both the width and length at the same time.
Since I'm already using Dragula for drag / drop functionality (moving items) I'd like to avoid having to use https://jqueryui.com/resizable/ for this resizing, and I feel Dragula should be able to handle this as well. But I couldn't find any info about this besides this https://github.com/bevacqua/dragula/issues/195 where the response isn't very useful at all.
It might be a stupid question, but I at least can't figure out how to implement this with Dragula, so I'm hoping one of you might be able to enlighten me. :-)

You could use the moves method to only allow dragging from a certain region like this:
constructor(private dragulaService: DragulaService,
) {
this.dragulaService.createGroup("CARDS", {
direction: "vertical",
moves: (el, source, handle): boolean => handle.className.indexOf("ri-card-header") > -1
});
}
In this way you can specify a CSS selector to determine whether to allow moving or not. If the moves method returns false then the events will be forwarded and the move would not begin.

How to reflow container after a transform has been applied to child nodes?

I want to display div boxes in a container and arrange them horizontally. As this can get quite wide I also want to provide a zoom slider which will rescale these divs.
This works but the items are rescaled but not repositioned. I have created an example here: http://jsfiddle.net/mtphLyem/5/.
I would like the container to re-layout the items after the transform has been applied. How can I do this?

I think the problem comes with transform, because transform only "simulates" bigger elements, but doesn't change any width values or sth. like that which means your browser still tries to layout with your raw values.
You could achieve such an effect by just changing the font-size, which changes width, height and position all by itself.
For example:
http://jsfiddle.net/mtphLyem/7/
function zoom(zoomFactor) {
$('.container > .step').css('font-size', zoomFactor + 'px');
}
Update
From comment below:
'Then you might also change margins since changing size would again trigger the scaling. This one looks quite experimenting and I'm sure there's a more efficient way to do that but still it seems to work: jsfiddle.net/mtphLyem/10'

Since you're already using jQuery, just bind to the change event:
$("#zoom").on("input change", function() { zoom($(this).val()) });

Is there a way to get the list of elements which are currently visible in viewport having certain class

I'm Having more than 2000 html elements present in my document having class "abc".
When I scroll(Up/Down) I want list of html Elements present in my viewport having class 'abc' as I want to perform some activity on those elements which are present in viewport not on all the elements with class 'abc'

you could use the Viewport plugin from here: http://www.appelsiini.net/projects/viewport
here is a link to download it from their github: Viewport.js
using this plugin is very simple, to find all the .abc elements inside the viewport you simple add :in-viewport to your selector:
$('.abc:in-viewport');
here is a live demo: Fiddle

I created a Viewport class just for this purpose: https://github.com/gburghardt/viewport
It also has pseudo events for when the user stops scrolling and when the orientation if the viewport changes. Handy for mobile devices.

How to make HTML elements react on mouse movements?

my question is how can I add specific movement to x-y axis for an HTML element according to mouse movements.
Look at the site here and scroll to second slide:
http://community.saucony.com/kinvara3/
How can i achieve such effect!?

If you're going to write the library-free version, you will need to start with the following:
Learn DOM-manipulation.
var myEl = document.querySelector("#my-el");
Learn the <element>.style interface.
myEl.style.position = "absolute";
Learn the CSS properties, their values and how to read/use them from the style interface.
myEl.style.left = 10 + "px";
You'll need to understand the following CSS properties at a minimum:
"display"
"position"
"top"
"left"
"z-index"
Learn how to parse numbers from strings, properly, in JS.
...this will be unimportant, working with the mouse,
but very important, working with the DOM.
Learn how to write event-handlers.
window.addEventListener("mousemove", function (evt) {/*mousemove event object*/});
Learn the properties of event-objects (specifically the event-types that are important, like mouse, keyboard, touch).
Learn how to manage events, and control the number/frequency of operations, based on an ideal framerate, when the browser won't do it for you.
Learn how to make all of these things happen in a cross-browser, IE8+ way.
Learn a little linear-algebra (honestly, learning enough of it to understand an inverted-axis scaled-parallax is just a tiny bit harder than Grade 6 geometry.

You can get a similar effect CSS only, no JS needed!
You can see an example here: Pure CSS 3D Meninas, by Román Cortés. In his blog, there is also the explanation.
Basically, you have to split the target element in small elements, and on hover, set the position of different background layers according to your trigonometric calculations.
From his explanation,
There are 80 vertical hover elements of 5*455 pixels each, covering
the full effect. Each hover element contains inside elements to define
every layer position, the background image and the lateral background
image. When the hover element is not active (without the mouse over
it), all is inside elements showing images are hidden, with display:
none.
When the hover element is active, the images are set to display:
block, and the position of these are set. These positions have been
calculated and are written in the CSS code for each layer and each of
the 80 vertical hover elements. This is what does the magic.

Jquery draggable inside-out containment

instead of having the containment of the draggable element around it, how can I have it inside it? So you can drag the element anywhere as long as the edges of it do not collide with the element inside of it?

One approach is to use the drag event and update the ui.position or ui.offset fields, to manually constrain the item.
Here is a jsfiddle to illustrate the concept, although this doesn't fully implement what you describe.

You could fake it by making a real containing component that restricts your draggable element as if it is constrained by the smaller element. You would just have to make the dimensions of the real container like this:
Container.height = (Draggable.height - Restrict.height) + Draggable.height
Container.width = (Draggable.width - Restrict.width) + Draggable.width
Then, you would also need to counter the dragging motion so that the contained restriction element doesn't seem to move when the draggable element moves. Either that or the immobile section could be a floating div.

Building upon #RustyTheBoyRobot's answer you could also accomplish in CSS alone if you have known dimensions of your draggable.
Live Example - jsbin.com/agovex
The obvious downside of this is if you want to reuse this in multiple situations it's not going to work because the values are hardcoded in CSS. But if you only need it for one thing with known dimensions I find the CSS only approach simple and elegant. There's only one line of JavaScript to create the draggable.

If anyone else is interested in this, using Rusty's code and logic here's a JSfiddle link.