Is there a way to drag and drop two elements (divs) simultaneously inside a table using jquery

[Bouali Ramzi]

i'm using jquery is there a way to drag and drop two elements divs simultaneously at the same time as one single div inside a table this is the code,

<table border="1" class="mainTable">
  <tr>
    <td id="11">
      <div class="dragDiv" id="1"></div>
    </td>
    <td id="12"><div class="dragDiv" id="2"></div></td>
    <td id="13">&nbsp;</td>
  </tr>
  <tr>
    <td id="21">&nbsp;</td>
    <td id="22">
      &nbsp;
    </td>
    <td id="23">&nbsp;</td>
  </tr>
  <tr>
    <td id="31">&nbsp;</td>
    <td id="32">&nbsp;</td>
    <td id="33">
      &nbsp;
    </td>
  </tr>
</table>

CSS

.mainTable {
  margin: 20px auto;
  padding: 0px;
}
.mainTable tr td {
  width: 100px;
  height: 100px;
}
.dragDiv {
  text-align: center;
  background-color: #00ABA9;
  height: 50px;
  vertical-align: middle;
  margin: auto;
  position: relative;
  width: 100%;
}

jquery

$(function() {
  $(".dragDiv").draggable({
    revert: 'invalid'
  });
  $(".mainTable tr td").droppable({
    accept: function() {
      return $(this).find("*").length == 0;
    },
    drop: function(event, ui) {
      var $this = $(this);
      $this.append(ui.draggable.css({
        /* manually append the element
                and reset positioning */
        top: 0,
        left: 0
      }));
      ui.draggable.position({
        my: "center",
        at: "center",
        of: $this,
        using: function(pos) {
          $(this).animate(pos, 100, "easeOutBack");
        }
      });
    }
  });
});

i tried many answers i found on this site like this answer here and here and so many more this is my project in Codepen I'll be glad to hear some suggestions thank you.

[Muthukrishnan Kandasamy]

Hi Bouali,

Greetings from Syncfusion support.

Based on your provided details, we understand that your requirement is to drag and drop the two elements simultaneously using jQuery Draggable. Please refer to the below public forums, which will help you to achieve your requirement.

https://stackoverflow.com/questions/793559/grouping-draggable-objects-with-jquery-ui-draggable

https://stackoverflow.com/questions/67826796/how-do-i-do-a-drag-and-drop-using-jquery-to-move-data-between-two-or-more-divs-a

https://stackoverflow.com/questions/5677993/how-do-i-drag-multiple-elements-at-once-with-javascript-or-jquery

https://stackoverflow.com/questions/77642289/is-there-a-way-to-drag-and-drop-two-elements-divs-simultaneously-inside-a-tabl

Please let us know, if you need any further assistance with Syncfusion components.

Regards,

Muthukrishnan K

[Bouali Ramzi]

thank you for your reply but i couldn't find a relevant solution.

[Muthukrishnan Kandasamy]

Hi Bouali,

We are quite unclear about your query, based on your provided details we suspected that you are using JQuery library draggable. So, we shared some general forums as similar to your query.

We have similar components in Syncfusion in JavaScript with draggable feature, refer to the below demo link,

https://ej2.syncfusion.com/javascript/demos/#/material3/dashboard-layout/default.html

If you are facing any issues or any requirement in our Syncfusion components, then feel free to reach us.

Regards,

Muthukrishnan K