javascript - Align elements with other elements using drag and drop plugin

Question

I have a table like structure where i am using drag/drop to drag and drop items i.e : A1,A2..etc with condition that if user drag A1 then they can only drop that element on same date i.e : 2021-02-01 and same condition for all other elements as well.

Problem :

• I am able to achieve that condition successfully but when i drop that element they are not align with other element so i need a way to make them align .

• Also , whenever i drop any element they are not visible at current position where it was but , when i am inspecting my browsers element tab i am able to see that element is still there only visibly position are getting change why this behaviour ? Can someone explain me this ?

This is code which i have tried :

$(function() {
  $(".drop").droppable({
    over: function(ev, ui) {
      $(this).css('background', 'orange');
    },
    out: function(ev, ui) {
      $(this).css('background', 'none');
    },

    accept: function(el) {
      if ($(this).hasClass(el.attr('data-id'))) {
        $(this).css("background-color", 'white');
        return true;
      } else {
        return false;
      }
    }

  })

  $(".drag").draggable({
    revert: "invalid"
  });
});

.lWrap {
  width: 500px;
  margin: 0 auto;
}

.date,
.box,
.dropHolder,
.drag {
  display: inline-block;
  width: 24%;
  border: 1px solid pink;
}

.dropHolder {
  border: 1px solid blue;
  height: 30px;
}

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="lWrap">
  <div class="box">&nbsp;&nbsp;</div>
  <div class="date">2021-02-01</div>
  <div class="date">2021-02-02</div>
  <div class="date">2021-02-03</div>
</div>

<div class="lWrap">
  <div class="box">Item 1</div>
  <div class="drop day1 dropHolder">
    <div data-id="day1" class="drag">A1</div>
  </div>
  <div class="drop day2 dropHolder">
    <div data-id="day2" class="drag">A2</div>
  </div>
  <div class="drop day3 dropHolder">
    <div data-id="day3" class="drag">A3</div>
  </div>
</div>

<div class="lWrap">
  <div class="box">Item 2</div>
  <div class="drop day1 dropHolder">
    <div data-id="day1" class="drag">B1</div>
  </div>
  <div class="drop day2 dropHolder">
    <div data-id="day2" class="drag">B2</div>
  </div>
  <div class="drop day3 dropHolder">
    <div data-id="day3" class="drag">B3</div>
  </div>
</div>

question from:https://stackoverflow.com/questions/65846494/align-elements-with-other-elements-using-drag-and-drop-plugin

Answer 1

Waitting for answers