Use the mouse to drag and drop the div elements

$('.component-container').sortable({
  cursor: 'move',
  items: ".component-section",
  placeholder: 'ui-state-highlight',
  start: function(e, ui) {
    ui.placeholder.width(ui.item.find('.component-section').width());
    ui.placeholder.height(ui.item.find('.component-section').height());
    ui.placeholder.addClass(ui.item.attr("class"));
  }
});
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="fila" class="row center expandir component-container" style="text-align: center;">
  <div class="col-md-6 col-xs-12" id="firstCol">
    <div class="col-md-12 col-sm-12 component-section" id="panel1">
    </div>
    <div class="col-md-12 col-sm-12 component-section" id="panel3">
    </div>
  </div>
  <div class="col-md-6 col-xs-12" id="secondCol">
    <div class="col-md-12 col-sm-12 component-section" id="panel2">
    </div>
  </div>
</div>

I've implemented drag and drop functionality, but I encountered a bug where it only allows me to drop three divs in the same column and not back into an empty column. How can I modify this to be able to place one of these divs in an empty column?

Thank you

jquerycssdrag-and-dropbootstrap-4

Answer №1

When you drag and drop a component-section, you have the ability to inspect the children of firstCol and secondCol using dom manipulation. If the count is 2 (as per your specified condition), you can prevent the drop operation by utilizing the sortable/draggable plugin.

Edit 1: // Take a look at the Plunker code snippet provided

$('.component-container').sortable({
      connectWith: '.component-container',  // Make sure to include this line
      cursor: 'move',
      items: ".component-section",
      placeholder: 'ui-state-highlight',
      start: function(e, ui) {
        ui.placeholder.width(ui.item.find('.component-section').width());
        ui.placeholder.height(ui.item.find('.component-section').height());
        ui.placeholder.addClass(ui.item.attr("class"));
      }
    });
});

In the HTML, remove the .component-container class from its current position and add it to the divs firstCol and secondCol.

<div id="fila" class="row center expandir " style="text-align: center;">  - removed component-container class here

<div class="col-md-6 col-xs-12 component-container" id="firstCol">  - added component-container here

<div class="col-md-6 col-xs-12 component-container" id="secondCol">  - added component-container here

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

JQuery datatables experiencing malfunction in ordering functionality

I created a datatable on a webpage using an AJAX call. My goal is to have the latest entry displayed at the top by default. However, after changing the parameters, the ordering does not seem to change and the records appear in a random order. var Initiate ...

javascriptjqueryajaxdatatables

Executing Multiple AJAX Requests Sequentially with JQuery

Is there a way to ensure that ajax calls in jQuery are executed in sequence without using async: false? I have tried utilizing ajaxComplete but it has not resolved the issue. The code provided loops through elements in an array and fires off ajax request ...

javascriptjqueryajaxsequence

Sending JSON information between pages using AJAX and jQuery

I am working on a form that contains: textarea select box button The purpose is to pass JSON input in the textarea, and upon clicking the button, the JSON data is sent to another PHP page named "sendingInterface.php". From there, the JSON data is ...

phpjqueryjson

Having difficulty submitting a form with ajax, while accomplishing the same task effortlessly without ajax

I have been experimenting with submitting a form using ajax to the same .php file. When I submit the form without ajax directly (form action), the database gets updated. However, when I try the same process with ajax, there is no change in the database. H ...

javascriptphphtmlcssajax

Attempting to organize Material Design cards in a staggered formation while ensuring they are evenly spaced out within their row

I found a great MDL template to use for my website at the following link: One feature of this template is that it aligns the "cards" in three columns. I am facing a challenge as I attempt to stagger the rows of "cards" by 2 columns, then by 3 columns, an ...

htmlcssmaterial-designmaterial-design-lite

What are the recommended dimensions for business card height and width in pixels for online use?

Can someone please provide me with the exact dimensions in pixels for a standard business card? I have designed my own business card using HTML and CSS on my application, and I am now ready to print it. I want to ensure that it prints correctly at the actu ...

htmlcsswebprinting

Preventing Event Bubbling with Hammer.js 2.0: A Step-by-Step Guide

I have a situation with a parent and child div. I want to prevent panning or dragging on the child from affecting the parent. I came across a similar question that was asked a year ago, but I am using a newer version of Hammer.js with the jQuery wrapper. ...

javascriptjqueryhammer.jsstoppropagation

The show.bs.modal event has been triggered when the .show() method is used on elements within the

Recently, I discovered that the event show.bs.modal is triggered not only when the modal itself is shown, but also every time you call the .show() method for an element within the modal. To attach the event handler, you would typically use the following c ...

javascriptevent-handlingbootstrap-4bootstrap-modalformvalidation.io

The transparency of my navbar renders it elegant, yet I desire to imbue the toggle background with a vibrant hue

I'm facing an issue with the transparent Navbar I built in Bootstrap 5. On mobile toggle view, the navigation links are getting lost within the text of the hero image. To resolve this, I want to keep the main navigation bar transparent and change the ...

htmlcssnavigationtogglebootstrap-5

Issue with Dropdown Menu functionality while using multiple dropdown options

I am currently experimenting with dropdown menus from W3Schools and have encountered an issue when trying to implement two dropdown options. The code works fine for a single dropdown, but when I try to add a second one using GetElementsByClassName instead ...

javascripthtmlcsstwitter-bootstrap

Is there a way to position two bootstrap col divs in alignment with a third col div situated to the left?

I'm attempting to achieve the desired layout shown in this result: https://i.sstatic.net/B3EDr.png Here is the code I have been working with: <div class="container"> <h1>Welcome Dennis,</h1> <div class="col-12 card card- ...

htmlcssbootstrap-4

Display an external function that highlights a Polyline in Google Maps V3

I want to create a Polyline that will be highlighted when I hover over an anchor tag. Everything is working fine with my code, as the Polyline is being drawn from a gps file. However, I am struggling to use 'setOptions' from an external function. ...

jquerygoogle-mapsgoogle-maps-api-3polyline

Which JavaScript library or template engine would be most suitable for this scenario?

I am tasked with creating an invite your Facebook friends module that will display the names and photos of your friends, allowing you to message them. It is essential that this feature seamlessly integrates into my website's design, so I need to style ...

javascriptjqueryfacebookjson

Updating a div using AJAX in Rails 4

Looking for a way to update a table with new values using AJAX? If you have a cart where users can change the quantity of products without reloading the entire page, consider this approach. Currently, the table reloads along with the whole page. Here&apos ...

javascriptjqueryajaxruby-on-rails-4

What is the most efficient way to find the parent element with the fewest children?

In close proximity are two containers, each containing a series of smaller containers. <ul class="containers"> <li>Matt</li> <li>John</li> <li>Mark</li> </ul> <ul class="containers"> &l ...

jquerydom

"Efficiently Triggering Multiple Events with One Click in JavaScript

Hey everyone, I could use some assistance. I'm trying to execute multiple events with a single click. Currently, I can change the image in my gallery on click, but I also want to add text labels corresponding to each image. Whenever I click on a diffe ...

javascripthtmljquerycssdom-events

"Enhance Your Website with Bootstrap Tab Navigation and jQuery BBQ

http://jsfiddle.net/Mrbaseball34/CQXBx/3/ HTML: <div class="tabbable tabs-left"> <ul class="nav nav-tabs"> <li class="active"> <a href="#tab1">Profile Settings</a> </li> <li&g ...

jqueryjquery-pluginstwitter-bootstrap

Laravel Troubles: The Predicament of Handling Ajax Requests - Error 400

Here is the JavaScript code snippet: $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' } }); $.ajax({ type : 'POST', url: 'test', data: data, success: ... }); An issue where a 400 error occurs h ...

phpjqueryajaxlaravel

Is there a quicker method to update a div?

I'm looking for a more efficient way to refresh the contents of elements on my page every 5 seconds. The current code I have is functional but feels redundant and lengthy. Using just the setInterval function causes the page to not load consistently be ...

javascriptjqueryajax

The functionality of Bootstrap scroll spy is compromised when used with the javascript implementation or the content within the <body> element

Check out this simplified version of my project on a fiddle. Even though it is set up correctly, it doesn't seem to work at all. https://jsfiddle.net/ybarpz3x/8/ I've spent the last 3 days trying to debug this issue but I just can't seem t ...

javascriptjqueryhtmlcsstwitter-bootstrap