Доступ к блоку переполнения внутри TD

Question

Я хочу разработать инструмент расписания перетаскивания, что-то вроде Fullcalendar.

Я выбрал формат таблицы и прямоугольник div внутри TD, который представляет задачу.

<table onDragEnd={dragend}>
    <tr>
      <th>0</th>
      <th>2</th>
      <th>4</th>
      <th>5</th>
      <th>6</th>
      <th>7</th>
      <th>8</th>
    </tr>
    <tr>
      <td onDrop={drop} onDragOver={allowDrop}></td>
      <td onDrop={drop} onDragOver={allowDrop}></td>
      <td onDrop={drop} onDragOver={allowDrop}></td>
      <td onDrop={drop} onDragOver={allowDrop}></td>
      <td onDrop={drop} onDragOver={allowDrop}></td>
      <td onDrop={drop} onDragOver={allowDrop}></td>
      <td onDrop={drop} onDragOver={allowDrop}></td>
      
    </tr>
    <tr>
      <td onDrop={drop} onDragOver={allowDrop}> <div id="drag" style={styleRect} draggable={true} onDragStart={drag}></div> </td>
      <td onDrop={drop} onDragOver={allowDrop}></td>
      <td onDrop={drop} onDragOver={allowDrop}></td>
      <td onDrop={drop} onDragOver={allowDrop}></td>
      <td onDrop={drop} onDragOver={allowDrop}></td>
      <td onDrop={drop} onDragOver={allowDrop}></td>
      <td onDrop={drop} onDragOver={allowDrop}></td>
    </tr>
  </table>

Фрагмент

Я могу перетащить свою задачу прямоугольника, щелкнув TD, где вложен div, но, как вы можете видеть, моя задача прямоугольника переполняется на правильных TD, и я мог бы перетащить задача прямоугольника, щелкнув по соседним TD.

Чтобы быть более конкретным c, я могу перетащить, щелкнув по TD 5, но моя задача прямоугольника также находится на TD 6 и TD 7, и я бы можно перетащить и сюда.

Я пытался поставить TD на position:relative z-index:1 и задачу прямоугольника div на z-index:2 position:absolute

Answer 1

Вы можете добавить специальный class во время перетаскивания элемента. Также не забудьте добавить div обратно к td на drop.

function allowDrop(event){
  event.preventDefault()
};

function drag(event){
  event.target.classList.add("dragging");
  event.dataTransfer.setData("text", event.target.id)
};

function dragend(event){};

function drop(event){
  event.preventDefault();
  
  var data = event.dataTransfer.getData("text");
  var tSource = document.getElementById(data);
  
  if(tSource && event.target.tagName === 'TD'){
    event.target.appendChild(tSource);
    tSource.classList.remove("dragging");
  }
};

td{
  border: 1px solid grey;
  height: 25px;
  position: relative;
}

th{
  background: #3d3d3d;
  color: orange;
  border: 1px solid white;
  height: 25px
}

table{
  border: 1px solid black;
  border-collapse: collapse;
  width: 100%
}

.draggable{
  background: blue;
  display: block;
  height: 100%;
  width: 100%
}

.dragging{
  background: red !important;
}

#drag2{
  background: green;
  position: absolute;
  top: 0;
  width: 175px;
  z-index: 2 /*REM: If you want to be able to click in the overflow. If not, remove this property*/
}

<table onDragEnd="dragend(event)">
    <tr>
      <th>0</th>
      <th>2</th>
      <th>4</th>
      <th>5</th>
      <th>6</th>
      <th>7</th>
      <th>8</th>
    </tr>
    <tr>
      <td onDrop="drop(event)" onDragOver="allowDrop(event)"></td>
      <td onDrop="drop(event)" onDragOver="allowDrop(event)"></td>
      <td onDrop="drop(event)" onDragOver="allowDrop(event)"></td>
      <td onDrop="drop(event)" onDragOver="allowDrop(event)"></td>
      <td onDrop="drop(event)" onDragOver="allowDrop(event)">
        <div id="drag2" draggable="true" onDragStart="drag(event)" class="draggable"></div>
      </td>
      <td onDrop="drop(event)" onDragOver="allowDrop(event)"></td>
      <td onDrop="drop(event)" onDragOver="allowDrop(event)"></td>
    </tr>
    <tr>
      <td onDrop="drop(event)" onDragOver="allowDrop(event)">
        <div id="drag" draggable="true" onDragStart="drag(event)" class="draggable"></div>
      </td>
      <td onDrop="drop(event)" onDragOver="allowDrop(event)"></td>
      <td onDrop="drop(event)" onDragOver="allowDrop(event)"></td>
      <td onDrop="drop(event)" onDragOver="allowDrop(event)"></td>
      <td onDrop="drop(event)" onDragOver="allowDrop(event)"></td>
      <td onDrop="drop(event)" onDragOver="allowDrop(event)"></td>
      <td onDrop="drop(event)" onDragOver="allowDrop(event)"></td>
    </tr>
  </table>