javascript - get the position in a table

const items = [{
    id: 0,
    dataid: "a",
    type: "red",
    src: "https://i.imgur.com/ZEZLSOo.png",
    draggable: 2,
    position: 12,
    alt: "Norway",
  },
  {
    id: 1,
    dataid: "b",
    type: "red",
    src: "https://i.imgur.com/ZEZLSOo.png",
    draggable: 2,
    position: 12,
    alt: "Norway",
  },
  {
    id: 2,
    dataid: "a",
    type: "black",
    src: "https://i.imgur.com/dL3J8XS.jpeg",
    draggable: 2,
    position: 13,
    alt: "Norway",
  },
  {
    id: 3,
    dataid: "b",
    type: "black",
    src: "https://i.imgur.com/dL3J8XS.jpeg",
    draggable: 2,
    position: 13,
    alt: "Norway",
  }
]

const itemHTML = (item) => {
  return `
    <span
      class="event"
      data-id="${ item.dataid }"
      draggable="${ !!item.draggable }"
    >
     ${ item.dataid } <img
        data-imgid="${ item.id }"
        src="${ item.src }"
        class="b"
        alt="${ item.alt }"
        style="width: 30%;"
      />
    </span>
  `
}

// redrawing the table based on item attributes
const updateTable = (table, items) => {
  $(table).find('td').each(function(i, e) {
    let html = ''
    const filtered = items.filter(({
      position
    }) => position - 1 === i)
    if (filtered.length) {
      filtered.forEach(item => {
        html += itemHTML(item)
      })
    } else {
      html = !$(e).parent().index() ? i + 1 : 24 - $(e).index()
    }
    e.innerHTML = html
  })
}

updateTable('#targetTable tbody', items)

const dragrowHTML = ({
  id,
  to
}) => {
  return `<tr><td>${ id }</td><td>${ to }</td></tr>`
}

$(function() {
  initDragAndDrop();
});

function clearDragAndDrop() {
  $('.event').off();
  $('#targetTable td').off('dragenter dragover drop');
}

function initDragAndDrop() {
  $('.event').on('dragstart', function(event) {
    const itemid = event.target.getAttribute('data-imgid')
    var dt = event.originalEvent.dataTransfer;
    //add dat-attr and class from where to remove
    dt.setData('id', itemid);
  });

  $('.event').on('dragend', function(event) {
    clearDragAndDrop();
    initDragAndDrop();
  });

  // updated event handling
  $('#targetTable td').on('dragenter dragover drop', function(event) {
    event.preventDefault();
    if (event.type === 'drop') {
      const itemid = event.originalEvent.dataTransfer.getData('id');
      const item = items.find(({
        id
      }) => id == itemid)
      // if item is draggable
      if (item && item.draggable) {
        // calculate position
        item.position = ($(event.target).parent().index() * $(event.target).parent().children().length) + ($(event.target).index() + 1)
        // update table
        updateTable('#targetTable tbody', items)
        // update item's draggable property
        $('#dragtable tbody').append(dragrowHTML({
          id: item.id,
          to: item.position
        }))
        item.draggable--
      }
    }
  });
}Copy code

html,
body {
  margin: 0;
}

table {
  border-collapse: collapse;
}

td span {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #09C;
  font-weight: bold;
}

img {
  padding: 10px;
}

#dragtable {
  border-collapse: collapse;
}

#dragtable th,
#dragtable td {
  border: 1px solid black;
}Copy code

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="targetTable" class="b" border="10" bordercolor="blue" id="myT">
  <tbody>
    <tr>
      <td> 1</td>
      <td> 2</td>
      <td> 3</td>
      <td> 4</td>
      <td> 5</td>
      <td> 6</td>
      <td> 7</td>
      <td> 8</td>
      <td> 9</td>
      <td> 10</td>
      <td> 11</td>
      <td> 12</td>
    </tr>
    <tr>
      <td> 24</td>
      <td> 23</td>
      <td> 22</td>
      <td> 21</td>
      <td> 20</td>
      <td> 19</td>
      <td> 18</td>
      <td> 17</td>
      <td> 16</td>
      <td> 15</td>
      <td> 14</td>
      <td> 13</td>
    </tr>
  </tbody>
</table>

<table id="dragtable">
  <thead>
    <tr>
      <td>ID</td>
      <td>TO</td>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>Copy code