while drag and drop the job box, how to automatically resize or cover the timetable blocks based on-CodePudding

After I drop the job box in to the time table, I want the job box to cover the timetable boxes according to the data-column value on the job box. Example: if the job-A box has 4 in data-column attribute, then this should cover 4 boxes in timetable, meaning this job needs 4 hours to complete.Thank you in advance.

$(function() {
  $('.job').draggable({
    revert: true
  });

  $('.container').droppable({
    hoverClass: 'active',
    drop: function(e, ui) {

      $(this).html(ui.draggable.remove().html());
      $(this).droppable('destroy');
      $(this).addClass("dropped");
    },
    over: function(e, ui) {
      $(this).addClass("dropped");
    },
    out: function(e, ui) {
      $(this).removeClass("dropped");
    }
  });
});

.job {
  width: 50px;
  height: 15px;
  padding: 2px;
  margin: 0px 5px 10px 0;
  border: 1px solid red;
  background-color: #B9CD6D;
}

.dropJob {
  display: grid;
  grid-template-columns: 12vh repeat(9, 1fr);
}

.dropJob div {
  border: 2px solid #1974a8;
  border-right: none;
  border-bottom: none;
  padding: 3px 4px;
  background: #a5d5ff;
  line-height: 25px;
}

.dropJob div:nth-of-type(10n) {
  border-right: 2px solid #1974a8;
}

.dropJob div:nth-last-child(-n   10) {
  border-bottom: 2px solid #1974a8;
}

.dropJob div:nth-child(10n   1) {
  background: #32a4e5;
  font-size: 12px;
  text-shadow: 1px 1px 2px #103143;
  color: #e3f5ff;
}

.dropped {
  background: green !important;
}

.timing {
  display: grid;
  grid-template-columns: 12vh repeat(9, 1fr);
}

.timing div {
  text-align: center;
  align-items: center;
  text-shadow: 1px 1px 2px #103143;
  color: #e3f5ff;
  font-size: 15px;
  background: #1974a8;
}

.scheduleContain {
  width: 100%;
  margin: 0 auto;
}

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<div class="job" data-column="4">Job-A</div>
<div class="job" data-column="1">Job-B</div>
<div class="job" data-column="2">Job-C</div>
<div class="job" data-column="7">Job-D</div>

<div class="scheduleContain">
  <div class="timing">
    <div>Name</div>
    <div>9am</div>
    <div>10am</div>
    <div>11am</div>
    <div>12am</div>
    <div>1pm</div>
    <div>2pm</div>
    <div>3pm</div>
    <div>4pm</div>
    <div>5pm</div>
  </div>

  <div class="dropJob">
    <div>John Smith</div>
    <div class="container"></div>
    <div class="container"></div>
    <div class="container"></div>
    <div class="container"></div>
    <div class="container"></div>
    <div class="container"></div>
    <div class="container"></div>
    <div class="container"></div>
    <div class="container"></div>
  </div>
</div>

CodePudding user response：

You can try like this:

$(function() {
  $('.job').draggable({
    revert: true
  });

  $('.container').droppable({
    hoverClass: 'active',
    drop: function(e, ui) {

      const job = ui.draggable
            let columnSize = job.data('column')
            let tempContainer = $(this);
            let randomColor = "#"   Math.floor(Math.random()*16777215).toString(16)   " !important";
            
            for (let i = 1; i <= columnSize; i  ) {
                $(tempContainer).addClass('dropped')

                $(tempContainer).css('background-color', randomColor)
                if (i > 1 && i <= columnSize) {
                    $(tempContainer).addClass('dropped-child')
                }
                $(tempContainer).data('job-id', job.text())
                tempContainer = tempContainer.next();
            }
            $(this).html(ui.draggable.remove().html());
            $(this).droppable('destroy');
            $(this).addClass("dropped");
    },
    over: function(e, ui) {
      $(this).addClass("dropped");
    },
    out: function(e, ui) {
      $(this).removeClass("dropped");
    }
  });
});

.job {
  width: 50px;
  height: 15px;
  padding: 2px;
  margin: 0px 5px 10px 0;
  border: 1px solid red;
  background-color: #B9CD6D;
}

.dropJob {
  display: grid;
  grid-template-columns: 12vh repeat(9, 1fr);
}

.dropJob div {
  border: 2px solid #1974a8;
  border-right: none;
  border-bottom: none;
  padding: 3px 4px;
  background: #a5d5ff;
  line-height: 25px;
}

.dropJob div:nth-of-type(10n) {
  border-right: 2px solid #1974a8;
}

.dropJob div:nth-last-child(-n   10) {
  border-bottom: 2px solid #1974a8;
}

.dropJob div:nth-child(10n   1) {
  background: #32a4e5;
  font-size: 12px;
  text-shadow: 1px 1px 2px #103143;
  color: #e3f5ff;
}

.dropped {
  background: green;
}

.timing {
  display: grid;
  grid-template-columns: 12vh repeat(9, 1fr);
}

.timing div {
  text-align: center;
  align-items: center;
  text-shadow: 1px 1px 2px #103143;
  color: #e3f5ff;
  font-size: 15px;
  background: #1974a8;
}

.scheduleContain {
  width: 100%;
  margin: 0 auto;
}

.dropped-child {
    border-left: none !important;
}

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<div class="job" data-column="4">Job-A</div>
<div class="job" data-column="1">Job-B</div>
<div class="job" data-column="2">Job-C</div>
<div class="job" data-column="7">Job-D</div>

<div class="scheduleContain">
  <div class="timing">
    <div>Name</div>
    <div>9am</div>
    <div>10am</div>
    <div>11am</div>
    <div>12am</div>
    <div>1pm</div>
    <div>2pm</div>
    <div>3pm</div>
    <div>4pm</div>
    <div>5pm</div>
  </div>

  <div class="dropJob">
    <div>John Smith</div>
    <div class="container"></div>
    <div class="container"></div>
    <div class="container"></div>
    <div class="container"></div>
    <div class="container"></div>
    <div class="container"></div>
    <div class="container"></div>
    <div class="container"></div>
    <div class="container"></div>
  </div>
</div>