7

I have such code:

<div class="table-area">
  <table>
    <thead>
      <tr>
      <th>someDate</th>
      <th>1</th>
      <th>2</th>
      <th>3</th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <td>someDateVal1</td>
        <td class="data-cell"></td>
        <td class="data-cell"></td>
        <td class="data-cell"></td>
      </tr>
      <tr>
        <td>someDateVal2</td>
        <td class="data-cell"></td>
        <td class="data-cell"></td>
        <td class="data-cell"></td>
      </tr>
    </tbody>
  </table>

  <div class="table-area-selected"
    draggable="true"></div>
</div>

and js:

$(function() {

  var selected = $('.table-area-selected');

  var cell = $('table').find('.data-cell');


  selected.css('width', $(cell[0]).outerWidth() * 2);
  selected.css('height', $(cell[0]).outerHeight());


  selected.css('top', $(cell[0]).position().top);
  selected.css('left', $(cell[0]).position().left);

  $('.table-area-selected').on('dragstart', function(event) {
    console.log('drag', event);
  });

  $('table').on('drop', function(event) {
    var selected = $('.table-area-selected');

    var cell = event.target;

    console.log('drop', event);


    selected.css('width', $(cell).outerWidth() * 2);
    selected.css('height', $(cell).outerHeight());


    selected.css('top', $(cell).position().top);
    selected.css('left', $(cell).position().left);
  });

  $('table').on('dragover', function(event) {
    event.preventDefault();
  });


});

https://plnkr.co/edit/NpRHbgHnUgGfgAOJnSTw?p=preview

Is it possible to drag this item like other schedule plugins? Like this: https://dhtmlx.com/docs/products/demoApps/room-reservation-html5-js-php/

Because now my rectangle is free. I need to set it's movements on table grid: like this: https://www.screencast.com/t/EXKQwTwTwkb and not this: https://www.screencast.com/t/g6jbP4s9hBX2

Is it possible to do?

2 Answers 2

11
+25

Personally I wouldn't use HTML 5 drag and drop in this case, I'd choose mouse events.

Note that I've written for a 2-column span; you'll need to tweak it if you want it to be more flexible.

$(function() {

  var isDragging = false;

  var $selected = $('.table-area-selected');

  var $cells = $('table').find('.data-cell');
  var colSpan = 2;
  var $currentCell = $($cells[0]);
  var cellWidth = $currentCell.outerWidth();

  $selected.css('width', cellWidth * colSpan);
  $selected.css('height', $currentCell.outerHeight() - 2); // fiddle factor
  $selected.css('top', $currentCell.position().top);
  $selected.css('left', $currentCell.position().left);

  // drag start
  $selected.mousedown(dragStart);

  // drag end
  $(window).mouseup(dragEnd);

  // drag over cells
  $cells.mouseenter(draggingIntoNewCell);
  $selected.mousemove(draggingInSelectedCell);


  function dragStart() {
    isDragging = true;
  }

  function dragEnd() {
    isDragging = false;
  }

  function draggingIntoNewCell() {
    $currentCell = $(this);
    reposition($currentCell);
  }

  // find if we've moved into the next column under this selection
  function draggingInSelectedCell(e) {

    if (isDragging) {

      // find relative position within selection div
      var relativeXPosition = (e.pageX - $(this).offset().left);

      if (relativeXPosition > cellWidth) { // moved into next column
        $currentCell = $currentCell.next();
        reposition($currentCell);
      }
    }
  }

  function reposition($cell) {

    // only reposition if not the last cell in the table (otherwise can't span 2 cols)    
    if (isDragging && $cell.next().hasClass('data-cell')) {
      $selected.css('top', $cell.position().top);
      $selected.css('left', $cell.position().left);
    }
  }

});
table th,
table td {
  padding: 8px 40px;
  border: 1px solid #cecece;
  position: relative;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

.table-area-selected {
  position: absolute;
  background: green;
  border: 1px solid blue;
  cursor: pointer;
}
<!DOCTYPE html>
<html>

<head>
  <script data-require="jquery@*" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>

<body>
  <h1>Hello Plunker!</h1>

  <div class="table-area">
    <table>
      <thead>
        <tr>
          <th>someDate</th>
          <th>1</th>
          <th>2</th>
          <th>3</th>
          <th>4</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>someDateVal1</td>
          <td class="data-cell"></td>
          <td class="data-cell"></td>
          <td class="data-cell"></td>
          <td class="data-cell"></td>
        </tr>
        <tr>
          <td>someDateVal2</td>
          <td class="data-cell"></td>
          <td class="data-cell"></td>
          <td class="data-cell"></td>
          <td class="data-cell"></td>
        </tr>
      </tbody>
    </table>

    <div class="table-area-selected"></div>
  </div>
</body>

</html>

Demo: http://plnkr.co/edit/RIhDiu9bI00SJysKvMuu?p=preview

1
  • I had attempted this initially with HTML Drag & Drop, but couldn't find any way to make it do what you wanted. Commented Aug 14, 2017 at 22:35
1

Just a simpler example, but with this you can use multiple selection boxes. Colspan can be .data-cell size related. I also added user-select: none; css property to avoid random text selection while dragging.

$(function() {
  var dragging = false;
  var selected = null;
  var cell = $('table').find('.data-cell');

  $('.table-area-selected').each(function(index) {
    $(this).css('top', $(cell.get(index)).position().top);
    $(this).css('left', $(cell.get(index)).position().left);

    $(this).css('width', $(cell.get(index)).innerWidth());
    $(this).css('height', $(cell.get(index)).innerHeight());
  });

  $('.table-area-selected').on('mousedown', function(event) {
    console.log('mousedown');
    selected = $(this);
    dragging = true;

  });

  $(window).on('mouseup', function(event) {
    console.log('mouseup');
    selected = null;
    dragging = false;
  });

  $('.data-cell').on('mouseover', function(event) {
    var cell = $(this);
    if (dragging) {
      selected.css('top', cell.position().top);
      selected.css('left', cell.position().left);

      selected.css('width', cell.innerWidth());
      selected.css('height', cell.innerHeight());
      console.log('dragged a selection box : ' + selected);
    }
  });

});
table th,
table td {
  padding: 10px 50px;
  border: 1px solid #cecece;
}

.table-area {
  position: relative;
  -webkit-user-select: none;
  /* Chrome, Opera, Safari */
  -moz-user-select: none;
  /* Firefox 2+ */
  -ms-user-select: none;
  /* IE 10+ */
  user-select: none;
  /* Standard syntax */
}

.table-area-selected {
  position: absolute;
  background: green;
  border: 1px solid blue;
  cursor: pointer;
}

.data-cell {}
<!DOCTYPE html>
<html>

<head>
  <script data-require="jquery@*" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body>
  <h1>Hello Plunker!</h1>

  <div class="table-area">
    <table>
      <thead>
        <tr>
          <th>someDate</th>
          <th>1</th>
          <th>2</th>
          <th>3</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>someDateVal1</td>
          <td class="data-cell"></td>
          <td class="data-cell"></td>
          <td class="data-cell"></td>
        </tr>
        <tr>
          <td>someDateVal2</td>
          <td class="data-cell"></td>
          <td class="data-cell"></td>
          <td class="data-cell"></td>
        </tr>
      </tbody>
    </table>

    <div class="table-area-selected"></div>
    <div class="table-area-selected"></div>
  </div>
</body>

</html>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.