Develop Reference

Vue draggable with elements that change height upon being dragged

I have a Vue3 app with vue-draggable and I have a list of sortable cards which possibly contain long text inside. To make dragging easier, I want to hide the text contained in the cards and only show their title when one is being dragged. This makes it easier to drop the card into the right position.
In order to achieve this, the elements which I want to hide inside of the cards while one is being dragged are given a CSS class hidden-while-dragging and the whole collection receives a class dragging while an item is being dragged. This is achieved by setting a boolean variable to the correct value upon receiving the events start and end and conditionally setting the class on the whole <draggable> element. Then I have this CSS rule:
.dragging .hidden-while-dragging {
display: none;
}
This works fine except for one case: if I drag an element and, upon dragging, the height of the parent container changes (due to the disappearing of the content inside of the cards), I am not able to drag the item: it instantly gets dropped in place, and no end event is emitted, so for example the collection keeps the class dragging.
Afterwards, I am able to drop the element once again: the issue doesn't occur this time, because no change in height occurs, and after I drop the element, everything goes back to "normal".
I made this repo in order to have a reproducible example: https://github.com/samul-1/vue-draggable-bug-demo
Here's a codepen as well: https://codepen.io/samul-11/pen/mdjKvZa try and drag the first or last element and you'll see the issue.
You can observe the height of the #app element changing when dragging an element. An interesting thing is that this only happens if dragging the first or third item in my example, not the second. So apparenly the issue is with elements at the edge of the parent.
Is this a bug with the library or is there a way around it?

Prevent 'snapping' of lines when inline-block divs resize themselves?

I'm experimenting with making a nicer grid/list container. I'll have a bunch of objects to be displayed in a container, and I want to see them either in list view (where each item takes up 100% of the width and, say, 70px height) or grid view (where each item takes up, say, 100px width and 100px height). I made them all display: inline-block too, since they'll automatically position themselves appropriately (assuming the container div is the same width as one list item, which it is).
I want to make a smooth transition between them, so I made a fiddle to experiment. This does a good job in animating the size changes for each div, but there's a jarring height transition whenever a row of objects gets either too big or too small for its current row and adds/removes an object. My question is; is there a simple way to animate the objects to their end positions? For example, the sixth object which is at the bottom of the list view would reposition itself to the bottom right of the container in grid view.

If we use JavaScript MVC, then how can we still have animation for the view?

If we use MVC for our webpages, especially, if we just modify the data (the model), and let the view just "observe" the model so that whatever changes are done to the model, the view will automatically be updated and reflects the model, how can we have animation still?
(Update: the view is just a template such as Mustache or Handlebars, for example, in can.js, so how can we animate?)
For example, say if we have two rows of cards. The user can click on the first row to "move" a card into the second row. So we can fade out the card in Row 1 and fade in the card to the end of Row 2 if we don't use MVC. However, if we actually use 2 arrays and let 2 views observe these 2 arrays and no matter how the two array changes, the views reflect the model, then how can we actually have the fade out and fade in? I can only think of if the view uses opacity: 0 to not show the card, and use CSS transition so that we animate the disappearance and appearance of the cards, but then the cards will still show as empty space (still occupying screen space) after the opacity is 0. The question is, how can we let view automatically show what the model is but still have animation?

Adding to a row and removing from a row are changes to a state. And animation is just a way to visualize the changes to state.
So, it is actually pretty straightforward: Decide an animation to be used for every state change (Add = Fade In, Remove = Fade Out...) and when that state change happens, perform the corresponding animation.

How to slide a dynamic list of items horizontally in and out of a div using jquery

I am using a div container as a window to slide a list of horizontal li items in and out of view using jquery.
This is what I have so far:
http://jsfiddle.net/TX5fJ/5/
It initializes a list of 8 items and allows you to scroll them left and right within the div window. It also has functions for adding an item to the end of the list and removing an item from the beginning of the list.
What I am trying to do:
1) Add an item to the end of the list (item not visible)
2) Scroll the list to the left to make the item just added visible (first item moves out of view)
3) Remove the item from the head of the list (no longer needed)
The problem is that removing the first item causes the whole list to shift to the left.
If I don't remove the first item it seems to work. (see my test function)
My concerns with that solution is that the ul will have to be wide enough to hold all the potential items. If I don't give it a fixed width it does not work.
So i guess I could make it 99999px wide, and use the current method in the test button.
Anyone have a ideas on a better implementation then the current?
Thanks.

You could simply reset the margin-left property of your list after you have removed the list-item from the head:
function RemoveItem() {
$('#slider-items li').first().remove();
$('#slider-items').css('marginLeft', 0);
}
Updated fiddle.

JQuery Slider/Carousel Calculation

Basically I have a bottom bar that stores a definitive amount of objects, say 30, with a width of say 2000em.
Now I want to make this div scrollable but every tutorial I look at does not explain their calculation.
My scroller will be unique because I will only allow scrolling via a next and back button (basically like paging) and I need to calculate when the div has 0 space to move so I can AJAX load more items and of course this calculation needs to be resize safe (based on div width and not pre-defined numbers).
Now I am fine with the whole resize (recalc div width on resize event) and AJAX load more objects.
What I'm not fine with is the calculation required to understand how the div should scroll and how to judge when it has no more space to scroll.
Has anyone got experience with making a dynamic scroller that only acts uopn click of a next or previous button that could explain the calculation required to understand scrollLeft/Right?
Thanks for any and all help,

I actually sorted this by:
Taking the current scrollLeft() of the inner ul within the div wrapper and add on the div (wrapper) width.
I checked whether the sum from point 1 was less than the UL width.
If so then scroll otherwise load new page if there is one.
Reverse for the previous button.
Since the wrapper has a width of 100% specified it will always be the size of the screen which means no resize function needed.