drag images in a table - fix size and each image

Question

I want to be able to drag every single image and to go them where ever I like.I can not.I try to do it but I failed many times.Also,I don't know why my table is not standar is increasing his size(width and height).I want a standar table ,that is changing when I drag the image.Also I am not able to move all the images I insert them. Here is the javascript code

 $(function() {
    initDragAndDrop();
    $('#addRow').on('click', function() {
      $('#targetTable > tbody:last-child').append('');
      clearDragAndDrop();
      initDragAndDrop();
    });
  });

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

  function initDragAndDrop() {
    $('.event').on('dragstart', function(event) {
      var dt = event.originalEvent.dataTransfer;
      dt.setData('Text', $(this).attr('id'));
    });
    $('table td').on('dragenter dragover drop', function(event) {
      event.preventDefault();
      if (event.type === 'drop') {
        var data = event.originalEvent.dataTransfer.getData('Text', $(this).attr('id'));
        de = $('#' + data).detach();
        de.appendTo($(this));
      }
    });
  }

the .css code

table span {
  display: block;
  background-color: #09C;
  height: 1%;
  width: 200%;
  text-align: top;
  font-weight: bold;
  padding-top: 1px;
}

the code in body is this -the way I created my table

user_10606400 · Answer

You have given same id for all your span tag so your code is not able to find correctly from where to remove image .Instead of that you can use data-attribute and give some unique class to your td where these images are located. Then , you can simply use this class and data-id to detach any element whenever it is dropped.

Demo Code :

$(function() {
  initDragAndDrop();
  $('#addRow').on('click', function() {
    $('#targetTable > tbody:last-child').append('');
    clearDragAndDrop();
    initDragAndDrop();
  });
});

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

function initDragAndDrop() {
  $('.event').on('dragstart', function(event) {
    var dt = event.originalEvent.dataTransfer;
    //add dat-attr and class from where to remove
    dt.setData('Text', $(this).data('id') + "," + $(this).closest("td").attr('class'));

  });
  $('table td').on('dragenter dragover drop', function(event) {
    event.preventDefault();
    if (event.type === 'drop') {
      var data = event.originalEvent.dataTransfer.getData('Text').split(",");
      var data_id = data[0];
      var from_class_to_remove = data[1]
      //find td and span to remove
      de = $("." + from_class_to_remove + "> span[data-id=" + data_id + "]").detach();
      de.appendTo($(this));
    }
  });
}

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

img {
  padding: 10px
}

drag images in a table - fix size and each image

1 Answers