Flex Container Fails to Rearrange When a Flex Item is Dragged Away

Currently, I am using CSS3 flex boxes along with jQuery UI for drag and drop functionality.

One issue I am facing is that when I apply justify-content:space-around;, dragging a flex child outside of the container does not cause the remaining items to rearrange according to the justify-content property.

You can view this behavior in action on this JSFiddle

I am looking for a solution where the items automatically re-arrange themselves once an item is dragged out (rearranging to flex-start, flex-end, center, or any other desired position). I want them to flow smoothly after an item is removed.

Any suggestions on how I can address this issue?

jqueryhtmlcssjquery-uiflexbox

Answer №1

Upon closer examination, it appears that I have discovered the root of the issue on my own.

It seems that jQuery UI is solely responsible for altering the position of the element being dragged and dropped. Even after dropping it onto another droppable area, it remains within its parent, which may give the impression that the CSS flex items are not rearranging...

The resolution involves manually detaching the draggable element and appending it to the droppable area upon the drop event, like so:

ui.draggable.detach().appendTo($(this)); //where this refers to the droppable

For more information, please refer to: Append Draggable to Droppable (SO)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Confused by navigating with php

I've been attempting to convert this link into a PHP foreach loop without any success, and I'm new to Stack Overflow. I've used an array to generate the code, but I am uncertain of how to transform this code into a foreach loop. <ul class ...

phphtmlcss

Issue with overlapping sticky dropdown and sticky navigation in Bootstrap 4

My issue revolves around getting the dropdown button menu to display in front of the vertical menu. When I click on the dropdown, the vertical (blue) menu takes precedence. This problem arose suddenly after applying the sticky-top class to both menus. Whil ...

htmlcssbootstrap-4

Enhancing User Experience with jQuery Ajax Callbacks

Currently, I'm developing an ajax login form. The issue I'm facing is that when a user enters the wrong password, the login.php file returns "Incorrect password". However, it seems like the javascript code is unable to detect this error. $(&apos ...

jqueryajax

Generating dynamic divs using jQuery

Could someone please shed some light on why my code isn't working as expected? for(var i=0; i<4; i++) { var ref = i+1; $("#test").append("<div id='t" + ref + "'>In t" + ref + "</div>"); } The goal he ...

jqueryhtml

Issue with loop detected in <fieldset> tags - prematurely adding closing tag

In the development of my web app using Google Apps Script, I am faced with the challenge of creating a set of checkbox fields for each learner/student, displayed in rows of three. These checkboxes are generated from data stored in a spreadsheet. My goal i ...

javascriptjqueryformsgoogle-apps-script

What is the best way to design an HTML table that features alternating colors for each row and column?

I recently came across this image showcasing a beautifully designed table: https://i.stack.imgur.com/6K63q.png The current HTML code I have applies colors to every even line, including the year columns and subcolumns. Is there a way to assign unique mixe ...

htmlcss

What is the correct way to include '?i#efix' in a font directory path in a Rails application?

It is suggested to include ?#iefix at the end of .eot font paths in order to resolve another erratic behaviour issue in IE: @font-face { font-family: 'MyWebFont'; src: url('webfont.eot'); /* IE9 Compat Modes */ src: url(&ap ...

cssruby-on-railsasset-pipelinefont-face

The click event will not be triggered if the element is removed by my blur event

My dropdown list is dynamic, with clickable items that trigger actions when clicked. Upon focus, the list displays suggested items When blurred, the list clears its contents The issue arises when blur/focusout events are triggered, causing my element to ...

javascripthtmldom-events

Tips for establishing breakpoints within Material UI grid for achieving responsiveness

I am currently utilizing Material ui's Grid component to organize my user interface elements. Here is the code snippet: <Grid container spacing={3}> <Grid container item xs={12} sm={12} md={12} style={{ marginTop: '-1.5%', marginRi ...

cssgridmaterial-uiresponsive

show fixed div when in view

After seeking inspiration from this specific thread on SO, I still need some help. The challenge I'm facing involves displaying a sticky footer within a parent div that is positioned halfway down the page. I've tried multiple tutorials, but none ...

javascripthtmljquerycss

Is it possible to generate various resolutions of an image simultaneously?

While trying to download wallpapers from a link on this website, I encountered an issue. Upon clicking the download button, a new page opened with the URL "https://images.wallpapersden.com/image/download/street-fighter-fortnite_bGtoaW6UmZqaraWkpJRmbmdlrW ...

javascripthtmljquerycssweb

Managing numerous JavaScript objects within a plugin

I have developed a straightforward javascript plugin that enables me to gather data from specific html elements. A page can contain x number of elements (usually up to 20), each with its own settings. However, the issue I am facing is that the returned obj ...

javascriptjqueryjsonobject

If the checkbox is selected, include an anonymous email in the field and conceal the field

I am looking to enhance my Feedback form by providing users with the option to submit feedback anonymously. However, my CMS requires both Email and Name fields to be mandatory. To address this, I am considering adding a checkbox that, when selected, auto ...

javascriptjqueryforms

What are the steps to viewing an image or video file in full screen mode on a web browser?

Is there a way to play video/image files in full screen mode on a browser? How can I achieve this? ...

javascriptjqueryhtml

"Discovering a button press using the Gamepad API: A Step-by-Step Guide

I'm currently building a web page that can detect button presses on an Xbox controller and display a boolean value based on the pressed button. Right now, I have successfully managed to detect when a controller is connected and show it as a string. Ho ...

javascripthtmlgamepad-api

Arrange elements in a vertical flow based on the height of the container

I am attempting to alter the direction of Elements to be vertical. Here is an example: By default, HTML elements are displayed horizontally like this:- #container { position: absolute; width: 400px; height: 200px; border: 1px solid gree ...

javascriptjqueryhtmlcss

Set the page to be rigid instead of flexible

I'm struggling to lock this webpage in place, so it doesn't resize when the browser window changes. The text keeps collapsing whenever I adjust the size of the browser, and I can't figure out what's going wrong. Can someone please help ...

htmlcss

Is there any alteration needed for the animation script?

Recently, I stumbled upon a useful tutorial about animating elements while scrolling. You can check it out here: Tutorial for animated scroll loading effects with Animate.css and jQuery | web2feel.com The tutorial showcases how to animate div elements wit ...

jqueryanimation

An easy guide on implementing the if control statement within a Jinja2 embedded HTML document

Utilizing parsehub, I have successfully scraped a list of movie names and exported it to an html file using a python script. However, my intention is to only display titles that contain the word "The" by implementing an if statement. The code structure app ...

pythonhtmldjangoparsehub

Embed a FLV video within a jQuery tooltip

My current setup includes a line of code like this: <img title="FLV Video goes here" class="tooltip" src="/images/icon-question.png" alt="questions" width="12" height="12" border="0" /> When hovering over the image, the text in the title attribute ...

jqueryhtmljquery-ui